利用Keydown事件阻止使用者輸入

weixin_33670713發表於2017-10-11

先了解下各事件的區別

keydown:在控制元件有焦點的情況下按下鍵時發生

keypress:在控制元件有焦點的情況下按下鍵時發生

keyup: 在控制元件有焦點的情況下釋放鍵時發生

意義

keypress主要用來接收字母、數字等ANSI字元。keydown 和 keyup 事件過程通常可以捕獲鍵盤除了PrScrn所有按鍵 (這裡不討論特殊鍵盤的特殊鍵)

keypress 只能捕獲單個字元,keydown 和 keyup 可以捕獲組合鍵

keypress 不顯示鍵盤的物理狀態(SHIFT鍵),而只是傳遞一個字元。keypress 將每個字元的大、小寫形式作為不同的鍵程式碼解釋,即作為兩種不同的字元。

keydown 和 keyup 不能判斷鍵值字母的大小,用兩種引數解釋每個字元的大寫形式和小寫形式:keycode — 顯示物理的鍵(將 A 和 a 作為同一個鍵返回)和 shift —指示 shift + key 鍵的狀態而且返回 A 或 a 其中之一

keypress 不區分小鍵盤和主鍵盤的數字字元,keydown 和 keyup 區分小鍵盤和主鍵盤的數字字元

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

}

相關文章