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

相关推荐
计算机魔术师4 小时前
OpenAI 砍掉 100 亿融资目标,AI 资本市场的温度计变了
前端
纪念 2294 小时前
C++ 算法(模拟)
开发语言·c++·算法
niucloud-admin5 小时前
NIUCLOUD PHP SAAS上门家政使用文档--服务订单:评价列表
开发语言·php
jktantan5 小时前
(二)Vue 3 的 attrs 不是响应式:el-form 扩展属性同步的三种方案
前端·javascript·vue.js·element-plus
Wang's Blog5 小时前
Java 项目实战: 交友项目 - 项目:需求分析与滑动数据设计
java·开发语言·交友
前端 贾公子5 小时前
第 5 章:Codex 从可运行程序到可交付工具
java·前端·数据库
gz927cool5 小时前
Python 全栈应用最佳实践完整指南
开发语言·python·ai
CoderYanger5 小时前
Java EE 进阶:5. Spring IoC&DI(第三弹):Spring DI
java·开发语言·spring boot·spring·面试·java-ee·mvc
用户360055579005 小时前
Kestrel_VLLM - 26 · 发射空档三步曲:事件计时 → nsys → 判别实验
前端
AIFQuant5 小时前
Python期货行情API接入:股指、黄金、原油多品种数据管道实战
开发语言·python·金融·区块链·量化开发