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

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

相关文章:

  • 力扣hot100,739每日温度(单调栈)详解
  • 什么是模块化区块链?Polkadot 架构解析
  • 【今日三题】笨小猴(模拟) / 主持人调度(排序) / 分割等和子集(01背包)
  • Pinia——Vue的Store状态管理库
  • 【KWDB创作者计划】_企业级多模数据库实战:用KWDB实现时序+关系数据毫秒级融合(附代码、性能优化与架构图)
  • 基于深度学习的智能交通流量监控与预测系统设计与实现
  • Spring Boot API版本控制实践指南
  • 基于深度学习的医疗诊断辅助系统设计
  • 深入详解人工智能数学基础—概率论-KL散度在变分自编码器(VAE)中的应用
  • SHCTF-REVERSE
  • 【极致版】华为云Astro轻应用抽取IoTDA影子设备参数生成表格页面全流程
  • 如何在 iPhone 上恢复已删除的联系人:简短指南
  • OkHttp源码梳理
  • 2025 FIC wp
  • 【C语言】fprintf与perror对比,两种报错提示的方法
  • 【Webpack \ Vite】多环境配置
  • Redis一些小记录
  • lstm用电量预测+网页可视化大屏
  • 矩阵系统源码搭建热门音乐功能板块开发,支持OEM
  • 【音视频】音频编码实战
  • 新版国家卫生监督抽查计划发布,首次明确打击网络“医托”
  • “70后”通化市委书记孙简已任吉林省政府领导
  • “归雁经济”能带来什么?川大商学院调研团队深入乡村与返乡青年人才交流
  • 咖啡与乳腺健康之间,究竟有着怎样的复杂关系?
  • 商务部:汽车流通消费改革试点正在加快推进
  • 民生访谈|公共数据如何既开放又安全?政务领域如何适度运用人工智能?