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 只作为快速查询使用

相关推荐
烤麻辣烫3 分钟前
黑马程序员苍穹外卖(新手)DAY6
java·开发语言·学习·spring·intellij-idea
雨雨雨雨雨别下啦14 分钟前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
友友马29 分钟前
『QT』窗口 (一)
开发语言·数据库·qt
simon_934933 分钟前
受够了压缩和收费?我作为一个码农,手撸了一款无限容量、原图直出的瀑布流相册!
前端
APIshop33 分钟前
Python 零基础写爬虫:一步步抓取商品详情(超细详解)
开发语言·爬虫·python
e***87701 小时前
windows配置永久路由
android·前端·后端
AI科技星1 小时前
为什么宇宙无限大?
开发语言·数据结构·经验分享·线性代数·算法
Appreciate(欣赏)1 小时前
JAVA使用poi类读取xlxs文件内容拼接成添加数据SQL
java·开发语言·sql
Dorcas_FE2 小时前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
小小前端要继续努力2 小时前
前端新人怎么更快的融入工作
前端