当前位置: 首页 > ds >正文

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

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

<el-input type="number" v-model="aaa"></el-input>

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

<el-input v-model.number="aaa"></el-input>

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

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

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

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

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

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

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

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

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

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

终极方法

onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )"

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

http://www.xdnf.cn/news/2676.html

相关文章:

  • 中国区域250米归一化植被指数数据集(2000-2023)
  • 迅雷精简绿色融合版【高速下载版】12.1.9.2870【11.2.2.1716】【20250426】
  • 树莓派学习专题<10>:使用V4L2驱动获取摄像头数据--申请和管理缓冲区
  • 【PVR】《Adaptive Palm Vein Recognition Method》
  • codeforcesB. Binary Colouring
  • 实人认证开发指南:用API+深度学习构建人证合一系统
  • 【CF】Day45——Codeforces Round 1021 (Div. 2) BC
  • UV工具的安装与使用
  • 2025系统架构师---数据抽象(Data Abstraction)‌与‌面向对象架构风格
  • Android原生开发基础
  • 龙芯远程方案
  • 如何判断对一件事的认知深度?
  • Python+jieba文本分析示例:实现统计《红楼梦》中的人物并生成词云图
  • 人工智能——XGBoost 算法
  • 【2025最新Java面试八股】如何在Spring启动过程中做缓存预热?
  • 【基础篇】prometheus页面UI功能详解
  • AI翻译LangChain实现的一点有趣思考
  • 深入浅出提示词工程(结合 DeepSeek)
  • yolo-world踩坑指南
  • 服务器数据备份,服务器怎么备份数据呢?
  • 【Google Colab】利用unsloth针对医疗数据集进行大语言模型的快速微调(含跑通原代码)
  • 实现一个瀑布流布局
  • 文章记单词 | 第48篇(六级)
  • 【计算机组成原理实验】实验一 运算部件实验_加法器及计算机性能指标
  • 每日算法-250427
  • java异常
  • C++中的继承
  • 前端面试高频算法
  • 从增量式到绝对式 —— 深度理解编码器的原理与选型
  • 香港GPU显卡服务器与GPU云服务器的区别