微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用纯 Javascript 自动格式化/屏蔽文本字段无插件/库

如何解决使用纯 Javascript 自动格式化/屏蔽文本字段无插件/库

我正在尝试创建一个支持掩码/自动格式为 XX.XXX.XXX.X-XXX.XXX(仅限数字)的文本字段。下面的代码是我目前得到的代码。除了光标,这几乎是完美的期望。当用户键盘上的方向键向左/向右移动光标到3、7、11、13、17位置时,光标会跳到下一个位置。有什么办法可以解决这个问题吗?

<label>NPWP &nbsp; :</label>
<input type="text" id="txtNPWP" />

<script type="text/javascript">

    var txtNPWP = document.getElementById("txtNPWP");

    txtNPWP.addEventListener('keyup',function (e) {
        
        var cursorStart = txtNPWP.selectionStart,cursorEnd   = txtNPWP.selectionEnd,target      = e.target,chars       = target.value.replace(/\D/g,''),new_chars;


        if (cursorStart == "3" || cursorStart == "7" || cursorStart == "11" || cursorStart == "13" || cursorStart == "17") {
            cursorStart = txtNPWP.selectionStart + 1;
            cursorEnd = txtNPWP.selectionEnd + 1;
        }
        
        var char = e.target.value.replace(/\D/g,'').match(/(\d{0,2})(\d{0,3})(\d{0,1})(\d{0,3})/);
        e.target.value = char[1] + (char[2] ? '.' + char[2] : '') + (char[3] ? '.' + char[3] : '') + (char[4] ? '.' + char[4] : '') + (char[5] ? '-' + char[5] : '') + (char[6] ? '.' + char[6] : '');
        
        txtNPWP.setSelectionRange(cursorStart,cursorEnd);

    },false);

</script>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。