在web網頁中，尤其是某些提交表單操作，需要驗證文本框輸入內容，本文利用文本框鍵盤事件和事件對象，對文本框只允許輸入數字方法進行總結。 1.鍵盤事件 keydown >鍵盤按下事件 keydown的時候，我們所按的鍵並沒有落入文本框 keyup >鍵盤彈起事件 keyup的時候，我們所按的鍵已經落入 ...
在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>
