js 限制input只能输入数字,并删除不是数字的值

只能输入数字,并删除不是数字的值(复制过来的不能过滤)

<input type="text" onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');if(this.value.split('.').length>2){this.value=this.value.split('.')[0]+'.'+this.value.split('.')[1]}">


1.文本框只能输入数字代码(小数点也不能输入)
<input ōnkeyup="this.value=this.value.replace(/\D/g,'''')" ōnafterpaste="this.value=this.value.replace(/\D/g,'''')">

2.只能输入数字,能输小数点.
<input ōnkeyup="if(isNaN(value))execCommand(''undo'')" ōnafterpaste="if(isNaN(value))execCommand(''undo'')">
<input name=txt1 ōnchange="if(/\D/.test(this.value)){alert(''只能输入数字'');this.value='''';}">

3.数字和小数点方法二
<input type=text t_value="" o_value="" ōnkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" ōnkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" ōnblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

4.只能输入字母和汉字
<input ōnkeyup="value=value.replace(/[\d]/g,'''') "onbeforepaste="clipboardData.setData(''text'',clipboardData.getData(''text'').replace(/[\d]/g,''''))" maxlength=10 name="Numbers">

5.只能输入英文字母和数字,不能输入中文
<input ōnkeyup="value=value.replace(/[^\w\.\/]/ig,'''')">

6.只能输入数字和英文<font color="Red">chun</font>
<input ōnKeyUp="value=value.replace(/[^\d|chun]/g,'''')">

7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input ōnKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input ōnkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,''$1$2.$3'')">


 本文由广州光纤 http://gzxiteng.com整理,转载请注明。 


### 配置 `el-input` 组件仅允许输入数字 为了使 `el-input` 组件仅接受数字输入,可以通过多种方式实现这一功能。一种常见的方式是在事件处理函数中过滤掉数字字符。 #### 方法一:使用正则表达式替换字符 通过监听 `@input` 事件,在每次用户输入时移除任何不符合条件的字符: ```html <el-input v-model="numberOnly" @input="(v) => (numberOnly = v.replace(/[^0-9]/g, ''))"></el-input> ``` 这种方法简单直接,适用于只需要纯整数的情况[^1]。 #### 方法二:自定义指令限制输入内容 创建一个全局或局部的 Vue 自定义指令来自动清理输入框内的数据: ```javascript import Vue from 'vue'; // 定义名为 LimitInputNumber 的指令 Vue.directive('limit-input-number', { bind(el){ el.oninput = () => { // 移除数字和小数点以外的所有字符 el.value = el.value.replace(/[^\d.]/g,''); // 如果有多个小数点,则保留第一个删除其余的小数点 let decimalCount = (el.value.match(/\./g) || []).length; if(decimalCount > 1){ el.value = el.value.slice(0, el.value.indexOf('.') + 1) + el.value.slice(el.value.indexOf('.')).replace(/\./g,''); } }; } }); ``` 然后可以在模板里这样应用这个指令: ```html <el-input v-limit-input-number></el-input> ``` 此方法不仅限于整数,还支持带有单一小数点的有效浮点数输入[^2]。 #### 方法三:利用内置组件特性 对于更严格的场景下(比如不允许负号),推荐考虑官方提供的专门用于数字输入的 `<el-input-number>` 组件,它天然就具备了对最小最大范围控制等功能。 ```html <el-input-number v-model="numValue" controls-position="right" :min="0"></el-input-number> ``` 以上三种方案都可以有效地达到让 `el-input` 接受特定类型的输入的目的,具体选择取决于实际需求以及项目复杂程度等因素。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值