前端的小玩意(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

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

相关文章
3月13日云栖精选夜读 | Serverless 风暴来袭,前端工程师如何应对?
尽管大部分前端的工作并不涉及server,但最近半年serverless这个词汇以及其引发的热烈的讨论,深深触动了阿里巴巴高级前端技术专家伐薪。作为接触前端十余载的老开发,伐薪认为serverless可能会是接下来引起前端领域革命性变化的技术之一。
3465 0
前端常见bug系列3:<input type="text">中emoji表情与文字并存时表情被截掉一部分
比如,有这个一个demo页面: ``` Title .text-input{ font-size: 1.2rem; line-height: 1.2rem; height: 1.2rem; border: 1p
4837 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3972 0
input输入框只允许中文汉字、数字、整数等
只允许输入数字   使用JS限制input输入框只允许中文汉字、数字、整数等效果,多款代码,希望对各位有所帮助,多多关注烈火网。 其一,只允许输入数字和小数点。 其二,判断的更详细一些,甚至22..2这样不算数字也判断得出来 function check(){ if (isNaN(tt.value)) {alert("非法字符!"); tt.value="";} } 其三,只允许输入整数。
734 0
与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控
原文:与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控 [索引页][源码下载] 与众不同 windows phone (25) - Input(输入)...
836 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载