JavaScript–文字框中只允許輸入數字的操作（其他字元不顯示）

笑蒼茫發表於2019-01-10
JavaScript字元

在web網頁中，尤其是某些提交表單操作，需要驗證文字框輸入內容，本文利用文字框鍵盤事件和事件物件，對文字框只允許輸入數字方法進行總結。

 

1.鍵盤事件

keydown —->鍵盤按下事件   keydown的時候，我們所按的鍵並沒有落入文字框

keyup —–    >鍵盤彈起事件  keyup的時候，我們所按的鍵已經落入了文字框，沒有機會再取消

所以要達到這種效果，需要使用keydown事件，此時還有機會取消，即利用取消預設行為方法完成按鍵落入文字框的取消

 

2.取消預設行為

方法1：return false;

方法2：e.preventDefault();

上述兩種方法，用第一個，整個事件結束，後續程式碼沒辦法執行，第二個方法，預設事件取消，但是後續程式碼還可以繼續執行。

 

3.獲取使用者按下的鍵

如何判斷使用者按下的鍵是數字，首先要獲取使用者按下的鍵，事件物件可以給我們傳遞一些引數，可以通過事件物件，獲取按下的內容

e.keyCode   通過在鍵盤按下0和9，獲取數字範圍的鍵盤碼範圍，只要判斷按下的鍵的鍵盤碼是不是在這個範圍就可以判斷按下的是不是數字。需要注意，鍵盤中，字母鍵上面的數字鍵和右邊的小鍵盤數字鍵的keyCode並不相同，要注意規避。

詳細程式碼如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>文字框輸入數字</title>
 6     </head>
 7 
 8     <body>
 9         <input type="text" id="txt" />
10         
11         
12         <script>
13             var txt = document.getElementById(`txt`);
14 
15             // 鍵盤事件
16             // keydown 鍵盤按下的時候
17             // keyup   鍵盤彈起的時候
18             // keydown 和 keyup的區別  keydown的時候我們所按的鍵還沒有落入文字框
19             // keyup鍵盤彈起的時候按的鍵已經落入文字框
20             txt.onkeydown = function(e) {
21                 e = e || window.event;
22                 // e.keyCode  鍵盤碼
23                 // console.log(e.keyCode);
24                 // 判斷當前使用者按下的鍵是否是數字
25                 // 如果e.keyCode 的值在 48-57 是數字
26                 // 按下後退鍵  8，刪除一個字元 
27                 if((e.keyCode <48 || e.keyCode>57) && e.keyCode != 8){
28                     //return false;
29                     e.preventDefault();
30                 }
31                 console.log(`asdas`)
32             }
33         </script>
34     </body>
35 </html>

 

相關文章