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

相关推荐
AIGC魔法师4 分钟前
AI 极客低代码平台快速上手 --生成Python代码
开发语言·harmonyos·低代码平台·ai极客
熊猫钓鱼>_>19 分钟前
对话即编程:如何用 Trae 的 @智能体 5 分钟修复一个复杂 Bug?
开发语言·python·bug
搏博21 分钟前
WPS JS宏实现去掉文档中的所有空行
开发语言·javascript·wps
hie9889427 分钟前
MATLAB中进行语音信号分析
开发语言·matlab·语音识别
逃逸线LOF31 分钟前
CSS之网页元素的显示与隐藏(旧土豆网遮罩案例)
前端·css
前进的程序员42 分钟前
C++经典库介绍
开发语言·c++
_xaboy1 小时前
开源表单设计器FcDesigner配置多语言教程
前端·vue.js·低代码·开源·表单设计器
文艺倾年1 小时前
【系统架构师】2025论文《WEB系统性能优化技术》
前端·性能优化·系统架构
铃木隼.1 小时前
Web技术与Nginx网站环境部署
前端·nginx·php
郭尘帅6661 小时前
Vue3 父子组件传值, 跨组件传值,传函数
前端·javascript·vue.js