el-input限制输入只能是数字 限制input只能输入数字

方法一:

通过设置type属性:type="number",这种方式一般会影响样式,不建议使用,如下图:

html 复制代码
<el-input type="number" v-model="aaa"></el-input>

方法二:

通过绑定值限制的方式:v-model.number="aaa",这种方式会限制一般的数字,但是会影响maxlengt属性,并且e是可以输入的,一般情况可以使用,严格限制的话不建议使用

html 复制代码
<el-input v-model.number="aaa"></el-input>

方法三:(建议使用)

通过对value值进行正则限制:οnkeyup="value=value.replace(/[^\d]/g,' ')",绑定一个onkeyup监听事件,/[^\d]/g 是用来匹配所有非数字内容的正则表达式,将之替换成空字符串,这种方式不会影响任何属性,推荐使用

html 复制代码
<el-input v-model="aaa" οnkeyup="value=value.replace(/[^\d]/g,'')"></el-input>

只允许输入数字(整数:小数点不能输入)

html 复制代码
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" >

允许输入小数(两位小数)

html 复制代码
<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,2})?). 1')" >

允许输入小数(一位小数)

html 复制代码
<input type="text" onkeyup="value=value.replace(/^\D (\d (?:.\d{0,1})?). 1')" >

开头不能为0,且不能输入小数

html 复制代码
<input type="text" onkeyup="value=value.replace(/[ \d]/g,'').replace(/ 0{1,}/g,'')" >

终极方法

html 复制代码
onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"

本文收集与https://zhuanlan.zhihu.com/p/653873229 只作为快速查询使用

相关推荐
lightqjx3 分钟前
【C++】unordered系列的封装
开发语言·c++·stl·unordered系列
m0_7190841111 分钟前
React笔记张天禹
前端·笔记·react.js
zh_xuan18 分钟前
kotlin lazy委托异常时执行流程
开发语言·kotlin
Ziky学习记录25 分钟前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n30 分钟前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n34 分钟前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
阿猿收手吧!35 分钟前
【C++】string_view:高效字符串处理指南
开发语言·c++
狗哥哥1 小时前
微前端路由设计方案 & 子应用管理保活
前端·架构
玄同7651 小时前
我的 Trae Skill 实践|使用 UV 工具一键搭建 Python 项目开发环境
开发语言·人工智能·python·langchain·uv·trae·vibe coding
Yorlen_Zhang1 小时前
Python Tkinter Text 控件完全指南:从基础编辑器到富文本应用
开发语言·python·c#