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隐藏过于麻烦而且可能会影响其他样式(不推荐)

相关推荐
Qiuner几秒前
浏览器拓展通用安装方法 edge浏览器、谷歌浏览器、google浏览器、火狐浏览器
前端·google·edge
xiaoxue..5 分钟前
前后端双令牌认证(Access Token + Refresh Token)全方案实现:安全与体验兼得
前端·后端·web安全·面试·typescript·nestjs
下雨打伞干嘛9 分钟前
手写Promise
开发语言·前端·javascript
Mike_jia10 分钟前
中国版的OpenClaw--OpenOcta(八爪鱼)为运维人打造的 7×24h 数字员工
前端
还是大剑师兰特17 分钟前
50个 filter相关的公共函数
开发语言·javascript·ecmascript
biubiubiu070620 分钟前
Chrome DevTools在Agent编程工具上的安装
前端·chrome·chrome devtools
老虎062720 分钟前
前端超全总结-----html,css,flex,vue,Ajax,ElementPlus,vueRouter语法应用讲解
前端·css·html
SuperEugene28 分钟前
前端基础实战:JS/TS与Vue体系化扫盲(47 篇完整目录 + 避坑)
javascript·vue.js·前端框架·npm·ecmascript·状态模式
坚持学习前端日记29 分钟前
AgentAi视频模型开发对接部署使用
前端·人工智能·python·flask·音视频
兆子龙31 分钟前
深入探究 React 史上最大安全漏洞
前端·javascript