美文网首页
原生JS格式化手机号(344)以及一些库的记录

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

作者: ceido | 来源:发表于2018-08-12 13:47 被阅读0次

    在一个input框中输入数字,格式化使其显示为:123 4123 4567 89123 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相对较少。

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

    相关文章

      网友评论

          本文标题:原生JS格式化手机号(344)以及一些库的记录

          本文链接:https://www.haomeiwen.com/subject/ghjsbftx.html