在一个input
框中输入数字,格式化使其显示为:123 4
、123 4567 89
、123 4567 8900
这样的344效果,并把数字位数限制为11位。
直接贴代码:
<input type="tel" id="input">
<script type="text/javascript">
var input = document.getElementById('input');
input.oninput = function() {
let str = this.value.toString().replace(/ /g, '');
let len = str.length;
switch (true) {
case len > 11:
str = str.substr(0, 3) + ' ' + str.substr(3, 4) + ' ' + str.substr(7, 4);
this.value = str;
break;
case len > 7:
str = str.substr(0, 3) + ' ' + str.substr(3, 4) + ' ' + str.substr(7);
this.value = str;
break;
case len > 3:
str = str.substr(0, 3) + ' ' + str.substr(3);
this.value = str;
break;
default:
this.value = str;
}
}
</script>
效果:
image.png
如果要其他分隔符,换一下即可:
image.png
为了实现只允许输入数字类型,还可以将
let str = this.value.toString().replace(/ /g, '');
加一步处理:
let str = this.value.toString().replace(/-/g, '').replace(/[^1-9]/g, '');
另外不要用keyup事件来绑定,你试一下就知道了。
自己测试了一下,输入、删除、粘贴等都是没有问题的。当然这只是自己出于学习的玩乐。于是我去找了一些库,可能会用到:
1.Cleave.js
npm: https://www.npmjs.com/package/cleave.js
我先是百度了一下,就看到这一个。看了一下它的Demo,感觉是比较好用的,专注于input元素内容的格式化,可以传入元素选择符:
image.png
也对react做了集成。
但看npm下载量比较少,而且有时候不仅仅只是格式化input的内容,后面去Google一下其他的。
2.formatjs
这不是一个包,而是对特定框架做了集成了几个包,看起来也不错:
image.png
只是没有vue和angular的。
3.numeraljs
npm:https://www.npmjs.com/package/numeral
专注于数字的各种格式化。
4.numbrojs
npm: https://www.npmjs.com/package/numbro
这个的用法跟上面那个差不多,感觉是上面那个的弱化版,下载量、star相对较少。
使用前要进行调研,每次引入新的包都应该谨慎选择。
网友评论