前端的小玩意（1）input 只允许输入整数 + 用逗号进行三位分割-优快云博客

本文介绍了一种使用JavaScript实现的自动格式化数字的方法，当用户在输入框中输入数字时，系统会自动每三位数字插入逗号以提高可读性。同时提供了限制输入仅限数字的解决方案，并详细说明了实现过程。

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

（34）将输入框数字，每3位用逗号分隔

输入框的值为this.value

JS代码：

function toHaveComma(obj) {
    console.log(obj.value);
    var val = obj.value.toString();
    var length = val.length;
    for (var i = 1; i < length / 3; i++) {
        var temp = val.slice(0, -4 * i + 1);    //从后往前数，来获取前面的字符串
        val = val.replace(temp, temp + ',');    //给前面的字符串后面加一个逗号
    }
    obj.value = val;
}

HTML代码：

<span style="font-size:18px;"><input type="text" 
       onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
       onfocus="this.value=this.value.replace(/,/gi,'')" /></span>

解释：

onKeypress只允许输入数字，如果允许输入句号的话，在[\d]改为[\d.]即可

onfocus是将上面分隔用的逗号，删除掉，只显示数字内容

效果：

①只能输入0-9数字；

②假如输入12345，会自动变为12,345

③假如输入框显示的是12,345，输入的时候，又变为12345，改为1234567后，输入框取消焦点后，又变为1,234,567