銀行卡號每隔4位插入空格


難點不是插入空格,而是修正光標的位置,這個只支持IE9+

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>銀行卡號4位空格</title>
    <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>
</head>

<body>
    <input type="text" id="kahao" />
    <script>
        $(function() {

            $('#kahao').on('keyup', function(e) {
             //只對輸入數字時進行處理
               if((e.which >= 48 && e.which <= 57) ||
                       (e.which >= 96 && e.which <= 105 )){
                    //獲取當前光標的位置
                    var caret = this.selectionStart
                    //獲取當前的value
                    var value = this.value
                    //從左邊沿到坐標之間的空格數
                    var sp =  (value.slice(0, caret).match(/\s/g) || []).length
                    //去掉所有空格
                   var nospace = value.replace(/\s/g, '')
                   //重新插入空格
                   var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim()
                   //從左邊沿到原坐標之間的空格數
                   var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
                  //修正光標位置
                 this.selectionEnd = this.selectionStart = caret + curSp - sp
               
                }
            })
        })
    </script>
</body>

</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM