input输入框只能输入数值而非字符

本文提供了一种解决方案,通过JavaScript代码让不支持type='number'属性的浏览器(如火狐)能够正确处理数值输入。该方法通过监听键盘抬起事件和失去焦点事件,确保输入框内的数据格式符合数字格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于火狐或有一些浏览器不支持 type=“number” 属性值

废话不多说,直接贴代码

// html标签部分
 <input type="text" onkeyup="this.value=format_num(this.value)" onblur="this.value=format_num(this.value,'blur')"/>
function format_num(val,type){
	//替换费小数点的字符
    var s1 = val = val.replace(/[^\d(?!.)]/g,'');
    var a = s1.indexOf('.');
    var b = s1.indexOf('0');
    var c = s1.indexOf('0.');
    if(type){
    	//失去焦点时,最后一位是小数点则去除
        if(a > 0 && a == (s1.length - 1)){
            return s1.replace(/[^\d]/g,'');
        }
    }
    if(c != 0 && b == 0 && s1.length >= 2){
        //判断输入的第一个数字不能为0
        return format_num(s1.substring(1,s1.length));
    }
    if(a < 0){
        return s1;
    }else if(a == 0){
        s1 = s1.substring(1,s1.length);
        return format_num(s1);
    }else {
        s1 = val.substring(0,a+1);
        val = (val.substring(a,val.length));
        val = val.replace(/[^\d]/g,'');
        return s1+val;
    }
}
### 设置 `el-input` 组件仅限输入数字 为了使 `Element UI` 中的 `el-input` 组件仅接受数字输入,可以采用两种主要方式实现这一功能。 #### 方法一:通过监听 `@input` 事件并使用正则表达式验证 这种方法涉及在模板部分定义 `el-input` 并绑定到数据模型属性上,同时附加一个自定义的方法来处理每次用户的输入。该方法内部会应用正则表达式过滤掉任何不符合条件(即数字字符)。具体代码如下所示: ```html <template> <el-input v-model="inputValue" @input="handleInput"></el-input> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleInput(value) { // 使用正则表达式验证输入值是否为纯数字或带有小数点的情况 const reg = /^[0-9]*\.?[0-9]*$/; if (!reg.test(value)) { this.inputValue = value.slice(0, -1); // 移除最后一位字符 } } } }; </script> ``` 此段代码确保了当用户尝试键入数值字符时,这些字符不会被添加到最终显示的内容中[^1]。 #### 方法二:直接利用 HTML 属性进行实时替换 另一种更为简洁的方式是在 `el-input` 标签内直接加入原生HTML属性来进行即时的数据清洗工作。这种方式不需要额外编写JavaScript逻辑即可达到相同的效果。下面是一个简单的例子说明如何操作: ```html <el-input v-model="model.amount" type="text" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入总金额"> </el-input> ``` 这里使用的 `oninput` 事件会在每次发生改变时触发,并立即执行给定的操作——移除数字的所有内容[^2]。 这两种方案都可以有效地限制 `el-input` 只接收数字类型的输入,开发者可以根据实际需求个人偏好选择合适的一种实施。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值