利用Keydown事件阻止用戶輸入

先了解下各事件的區別

• keydown：在控件有焦點的情況下按下鍵時發生
• keypress：在控件有焦點的情況下按下鍵時發生
• keyup：   在控件有焦點的情況下釋放鍵時發生

意義

1. keypress主要用來接收字母、數字等ANSI字符。keydown 和 keyup 事件過程通常可以捕獲鍵盤除了PrScrn所有按鍵 （這里不討論特殊鍵盤的特殊鍵）
2. keypress 只能捕獲單個字符，keydown 和 keyup 可以捕獲組合鍵
3. keypress 不顯示鍵盤的物理狀態（SHIFT鍵），而只是傳遞一個字符。keypress 將每個字符的大、小寫形式作為不同的鍵代碼解釋，即作為兩種不同的字符。
4. 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, del, 左右方向鍵
    if (code == 8 || code == 46 || code == 37 || code == 39) return true
    return false
}

 

效果：

 

相關：

https://github.com/snandy/e.js/blob/master/test/stop.html