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

最新推荐文章于 2024-07-03 11:46:28 发布

原创最新推荐文章于 2024-07-03 11:46:28 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#h5

h5小技能专栏收录该内容

1 篇文章

订阅专栏

本文提供了一种解决方案，通过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;
    }
}