利用Keydown事件阻止使用者輸入
先了解下各事件的區別
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
}
相關文章
- JavaScript keydown 事件JavaScript事件
- jQuery keydown事件jQuery事件
- JavaScript keydown事件總結JavaScript事件
- js keyup、keypress和keydown事件JS事件
- JavaScript阻止事件冒泡JavaScript事件
- jquery阻止事件冒泡jQuery事件
- keyup,keypress,keydown事件的區別事件
- stopPropagation() 阻止事件冒泡事件
- jQuery如何阻止事件冒泡jQuery事件
- 阻止冒泡和阻止預設事件的相容寫法事件
- Android輸入事件詳解Android事件
- JavaScript事件冒泡、事件捕獲和阻止預設事件JavaScript事件
- 原生js如何阻止事件冒泡JS事件
- javascript阻止事件冒泡程式碼JavaScript事件
- 阻止游標預設事件事件
- 移動端點透事件--阻止滾動事件事件
- input輸入框的各種事件事件
- WPF 裝置輸入事件封裝事件封裝
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- 阻止a標籤預設跳轉事件事件
- js阻止事件冒泡例項程式碼JS事件
- jQuery阻止事件冒泡程式碼例項jQuery事件
- jQuery阻止事件冒泡簡單介紹jQuery事件
- 阻止jquery事件冒泡程式碼例項jQuery事件
- jQuery阻止事件冒泡例項程式碼jQuery事件
- Android輸入系統(四)輸入事件是如何分發到Window的?Android事件
- Android入門教程 | EditText 使用者輸入Android
- Element 輸入框input響應回車事件事件
- Cocos Creator 玩家輸入事件(摘自官方文件)事件
- Android輸入系統(一)輸入事件傳遞流程和InputManagerService的誕生Android事件
- 利用C語言判別使用者輸入數的奇偶性和正負性C語言
- 阻止事件冒泡(stopPropagation和cancelBubble)和阻止預設行為(preventDefault和returnValue)事件
- 微信小程式開發系列五:微信小程式中如何響應使用者輸入事件微信小程式事件
- Java__包機制__使用者輸入Java
- dos命令下等待使用者輸入
- 輸入框只能輸入負數,整數,2位小數(鍵盤彈起事件)事件
- react中 Ender鍵 觸發事件數(輸入框)React事件
- 反除錯 -- 利用ptrace阻止偵錯程式附加除錯