当前位置: 首页 > 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
  • 【音视频】音频编码实战
  • 近七成科创板公司2024年营收增长,285家营收创历史新高
  • 全文丨中华人民共和国民营经济促进法
  • 五一去哪儿| 追着花期去旅行,“赏花经济”绽放文旅新活力
  • 解密62个“千亿县”:强者恒强,新兴产业助新晋县崛起
  • 王毅出席金砖国家外长会晤
  • “杭州六小龙”的招聘迷局