原生JS格式化手机号（344）以及一些库的记录

在一个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

image.png

专注于数字的各种格式化。

4.numbrojs

npm: https://www.npmjs.com/package/numbro
这个的用法跟上面那个差不多，感觉是上面那个的弱化版，下载量、star相对较少。

使用前要进行调研，每次引入新的包都应该谨慎选择。