JavaScript--實現限制input輸入框數字輸入，實現每四位一個空格效果（銀行卡號，手機號等）

　　前言

工作學習中經常能遇到輸入框限制輸入數字，並且每四位一空格的情況，比如表單中銀行卡號，手機號等輸入框的限制，這里介紹一下使用js具體的實現方法。不需要引用第三方ui庫。

正文

1.input標簽的數字輸入框

<input type="number"  />

實現結果如下：

這是html標簽限制的數字,返回字符串，表示 number 字段的表單元素類型，但是可以輸入+-*/.等特殊字符，不能滿足我們的需求。

2.限制數字輸入的輸入框

<input type="text" onkeypress="keyPress()">
<script>
         //實現只能輸入純數字
        function keyPress() {
            var myEvent = event || window.event;
            var keyCode = myEvent.keyCode;//這里做了兼容性處理
            if (keyCode >= 48 && keyCode <= 57){
                event.returnValue = true;
            } else {
                event.returnValue = false;
            }
        }
</script>

實現結果如下：

這里根據按下的鍵盤判斷對應的鍵盤碼是否是數字來實現輸入框內只能輸入數字，前提需要了解鍵盤碼，了解輸入框的事件：

鍵盤碼如下：

輸入框input對應的事件：

　　 oninput用戶輸入的時候觸發，當元素的值發生變化時立即觸發

        onchange在元素失去焦點時候觸發

        onkeypress 事件會在鍵盤按鍵被按下並釋放一個鍵時發生。

        與 onkeypress 事件的關聯的事件發生次序: onkeydown > onkeypress > onkeyup

 

3.每四位一空格的輸入框

 

<input type="text" oninput="checkStrLong()" onkeypress="keyPress()" id="nbsp">
<script>
         //實現只能輸入純數字
        function keyPress() {
            var myEvent = event || window.event;
            var keyCode = myEvent.keyCode;//這里做了兼容性處理
            if ((keyCode >= 48 && keyCode <= 57)){
                event.returnValue = true;
            } else {
                event.returnValue = false;
            }
        }
        //實現四位一個空格符
        function checkStrLong() {
            var reg = /\s{1,}/g;
            var str=""//定義頁面展示效果的值
            var mystr = document.getElementById("nbsp").value;
            mystr = mystr.replace(reg,"");
            for (let i = 0; i < mystr.length; i++) {
                if(i%4===0 && i>0){
                    str = str + " " + mystr.charAt(i);
                }else {
                    str = str + mystr.charAt(i);
                }
            }
            document.getElementById("nbsp").value = str;
            console.log(mystr);//實際輸入的值
        }
    </script>

實現結果如下：

通過鍵盤碼限制數字的輸入，然后每四位拼接一個空格，mystr為實際輸入的值，str為頁面顯示的值,這樣實現了我們的需求。

4.進階的方法就是使用組件庫里現成的

總結

以上就是我要介紹的全部內容了，希望對看到的人有些許幫助，有錯誤還請指正，謝謝啦！！如果覺得還不錯，請點下關注一起成長啦！