el-input仅限输入数字 (输入框仅支持输入数字)

需求:日常开发中会遇到输入框只能输入数字的功能。常用的方法有下面几种

  • 方式1 (将输入框类型改成number)
javascript 复制代码
<el-input v-model="number" type="number"/>
  • 方式2 (使用正则控制) 推荐使用该方式
javascript 复制代码
 <el-input v-model="value1" placeholder="请输入" @input.native="onInput"/>
 
const value1 = ref('')
// 定义输入处理函数
function onInput(event) {
  value1.value = event.replace(/[^\d.]/g, '');
  console.log(event, 'event', value1.value)
}
  • 方式3 (使用oninput来实现)
javascript 复制代码
<el-input v-model="amount" type="text" oninput="value=value.replace(/[^\d.]/g,'')"/>

比较推荐方式二 用正则的方式来做,方式三会有一个问题就是先输入汉字在输入数字,这个时候打印输入框绑定的值就会是空的,用方式二不会出现这个问题,方式一 加上number之后会出现上下箭头,需要用css隐藏过于麻烦而且可能会影响其他样式(不推荐)

相关推荐
小小码农Come on1 小时前
QML访问子项内容
前端·javascript·html
桜吹雪1 小时前
Langchain.js官方文档:构建具备按需加载技能的 SQL 助手
javascript·人工智能·node.js
han_2 小时前
一篇看懂国内外主流大模型:GPT、Claude、Gemini、DeepSeek、通义千问有什么区别?
前端·人工智能·llm
一行代码一行诗++2 小时前
注释是什么和注释该怎么写(C语言)
java·前端·javascript
涂兵兵_青石疏影2 小时前
beginPath-vs-save详解
前端
陈振wx:zchen20082 小时前
前端-面试题-JavaScript
javascript·前端面试题
Forever7_2 小时前
Vue 全局监控用户行为,最强方案!
vue.js
泽_浪里白条2 小时前
我在 Superset 6.x 做自定义图表 + Embedded SDK 集成的实战复盘(附踩坑清单)
前端·数据可视化
幽络源小助理2 小时前
小六壬排盘工具源码 自适应双端 纯原生HTML+JS
前端·javascript·html
Championship.23.243 小时前
Open Source Pipeline Skill深度解析:自动化开源贡献全流程
前端·javascript·html