先了解下各事件的區別
KeyDown:在控件有焦點的情況下按下鍵時發生
KeyPress:在控件有焦點的情況下按下鍵時發生
KeyUp: 在控件有焦點的情況下釋放鍵時發生
1、KeyPress主要用來接收字母、數字等ANSI字符。 KeyDown 和KeyUP 事件過程通常可以捕獲鍵盤除了PrScrn所有按鍵(這裡不討論特殊鍵盤的特殊鍵
2、KeyPress 只能捕獲單個字符,KeyDown 和KeyUp 可以捕獲組合鍵。
3、KeyPress 不顯示鍵盤的物理狀態(SHIFT鍵),而只是傳遞一個字符。 KeyPress 將每個字符的大、小寫形式作為不同的鍵代碼解釋,即作為兩種不同的字符。 KeyDown 和KeyUp 不能判斷鍵值字母的大小。 KeyDown 和KeyUp 用兩種參數解釋每個字符的大寫形式和小寫形式:keycode ― 顯示物理的鍵(將A 和a 作為同一個鍵返回)和shift ―指示shift + key 鍵的狀態而且返回A 或a其中之一。
5、KeyPress 不區分小鍵盤和主鍵盤的數字字符,KeyDown 和KeyUp 區分小鍵盤和主鍵盤的數字字符。
6、KeyDown、KeyUp事件是當按下( KeyDown ) 或鬆開( KeyUp ) 一個鍵時發生的。由於一般按下鍵盤的鍵往往會立即放開(這和鼠標不同),所以這兩個事件使用哪個差別不大。而且,up和其他兩者還有一個區別:要判斷key修改後的狀態必須用up。
我們可以利用keydown事件來阻止用戶的輸入,比如某輸入域只能輸入數字
鍵盤上數字鍵的keyCode
[48-57] 數字鍵
[96-105] 數字小鍵盤
此外允許Backspace鍵刪除
代碼如下
複製代碼代碼如下:
var input = document.getElementById('number_ipt')
input.onkeydown = function(e) {
var keyCode = e.keyCode
if ( !isNumber(keyCode) ) return false
}
// 僅能輸入數字
function isNumber(keyCode) {
// 數字
if (keyCode >= 48 && keyCode <= 57 ) return true
// 小數字鍵盤
if (keyCode >= 96 && keyCode <= 105) return true
// Backspace鍵
if (keyCode == 8) return true
return false
}