前端的小玩意(1)input 只允许输入整数 + 用逗号进行三位分割-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

前端的小玩意(1)input 只允许输入整数 + 用逗号进行三位分割

简介: (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 <

(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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章
展开