利用Keydown事件阻止用戶輸入實(shí)現(xiàn)代碼
更新時(shí)間:2014年03月11日 16:38:29 作者:
這篇文章主要介紹了利用Keydown事件阻止用戶輸入的具體實(shí)現(xiàn),需要的朋友可以參考下
先了解下各事件的區(qū)別
KeyDown:在控件有焦點(diǎn)的情況下按下鍵時(shí)發(fā)生
KeyPress:在控件有焦點(diǎn)的情況下按下鍵時(shí)發(fā)生
KeyUp: 在控件有焦點(diǎn)的情況下釋放鍵時(shí)發(fā)生
1、KeyPress主要用來接收字母、數(shù)字等ANSI字符。KeyDown 和 KeyUP 事件過程通??梢圆东@鍵盤除了PrScrn所有按鍵(這里不討論特殊鍵盤的特殊鍵
2、KeyPress 只能捕獲單個(gè)字符,KeyDown 和KeyUp 可以捕獲組合鍵。
3、KeyPress 不顯示鍵盤的物理狀態(tài)(SHIFT鍵),而只是傳遞一個(gè)字符。KeyPress 將每個(gè)字符的大、小寫形式作為不同的鍵代碼解釋,即作為兩種不同的字符。KeyDown 和KeyUp 不能判斷鍵值字母的大小。KeyDown 和 KeyUp 用兩種參數(shù)解釋每個(gè)字符的大寫形式和小寫形式:keycode — 顯示物理的鍵(將 A 和 a 作為同一個(gè)鍵返回)和 shift —指示 shift + key 鍵的狀態(tài)而且返回 A 或 a 其中之一。
5、KeyPress 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符,KeyDown 和KeyUp 區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
6、KeyDown、KeyUp事件是當(dāng)按下 ( KeyDown ) 或松開 ( KeyUp ) 一個(gè)鍵時(shí)發(fā)生的。由于一般按下鍵盤的鍵往往會立即放開(這和鼠標(biāo)不同),所以這兩個(gè)事件使用哪個(gè)差別不大。而且,up和其他兩者還有一個(gè)區(qū)別:要判斷key修改后的狀態(tài)必須用up。
我們可以利用keydown事件來阻止用戶的輸入,比如某輸入域只能輸入數(shù)字
鍵盤上數(shù)字鍵的keyCode
[48-57] 數(shù)字鍵
[96-105] 數(shù)字小鍵盤
此外允許Backspace鍵刪除
代碼如下
var input = document.getElementById('number_ipt')
input.onkeydown = function(e) {
var keyCode = e.keyCode
if ( !isNumber(keyCode) ) return false
}
// 僅能輸入數(shù)字
function isNumber(keyCode) {
// 數(shù)字
if (keyCode >= 48 && keyCode <= 57 ) return true
// 小數(shù)字鍵盤
if (keyCode >= 96 && keyCode <= 105) return true
// Backspace鍵
if (keyCode == 8) return true
return false
}
KeyDown:在控件有焦點(diǎn)的情況下按下鍵時(shí)發(fā)生
KeyPress:在控件有焦點(diǎn)的情況下按下鍵時(shí)發(fā)生
KeyUp: 在控件有焦點(diǎn)的情況下釋放鍵時(shí)發(fā)生
1、KeyPress主要用來接收字母、數(shù)字等ANSI字符。KeyDown 和 KeyUP 事件過程通??梢圆东@鍵盤除了PrScrn所有按鍵(這里不討論特殊鍵盤的特殊鍵
2、KeyPress 只能捕獲單個(gè)字符,KeyDown 和KeyUp 可以捕獲組合鍵。
3、KeyPress 不顯示鍵盤的物理狀態(tài)(SHIFT鍵),而只是傳遞一個(gè)字符。KeyPress 將每個(gè)字符的大、小寫形式作為不同的鍵代碼解釋,即作為兩種不同的字符。KeyDown 和KeyUp 不能判斷鍵值字母的大小。KeyDown 和 KeyUp 用兩種參數(shù)解釋每個(gè)字符的大寫形式和小寫形式:keycode — 顯示物理的鍵(將 A 和 a 作為同一個(gè)鍵返回)和 shift —指示 shift + key 鍵的狀態(tài)而且返回 A 或 a 其中之一。
5、KeyPress 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符,KeyDown 和KeyUp 區(qū)分小鍵盤和主鍵盤的數(shù)字字符。
6、KeyDown、KeyUp事件是當(dāng)按下 ( KeyDown ) 或松開 ( KeyUp ) 一個(gè)鍵時(shí)發(fā)生的。由于一般按下鍵盤的鍵往往會立即放開(這和鼠標(biāo)不同),所以這兩個(gè)事件使用哪個(gè)差別不大。而且,up和其他兩者還有一個(gè)區(qū)別:要判斷key修改后的狀態(tài)必須用up。
我們可以利用keydown事件來阻止用戶的輸入,比如某輸入域只能輸入數(shù)字
鍵盤上數(shù)字鍵的keyCode
[48-57] 數(shù)字鍵
[96-105] 數(shù)字小鍵盤
此外允許Backspace鍵刪除
代碼如下
復(fù)制代碼 代碼如下:
var input = document.getElementById('number_ipt')
input.onkeydown = function(e) {
var keyCode = e.keyCode
if ( !isNumber(keyCode) ) return false
}
// 僅能輸入數(shù)字
function isNumber(keyCode) {
// 數(shù)字
if (keyCode >= 48 && keyCode <= 57 ) return true
// 小數(shù)字鍵盤
if (keyCode >= 96 && keyCode <= 105) return true
// Backspace鍵
if (keyCode == 8) return true
return false
}
相關(guān)文章
JavaScript for in錨點(diǎn)的動態(tài)創(chuàng)建
主要包括for..in的使用,錨點(diǎn)的動態(tài)創(chuàng)建,狀態(tài)欄文字效果2008-09-09詳解axios中封裝使用、攔截特定請求、判斷所有請求加載完畢)
這篇文章主要介紹了axios中封裝使用、攔截特定請求、判斷所有請求加載完畢的相關(guān)知識,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04js實(shí)現(xiàn)響應(yīng)按鈕點(diǎn)擊彈出可拖拽的非模態(tài)對話框完整實(shí)例【測試可用】
這篇文章主要介紹了js實(shí)現(xiàn)響應(yīng)按鈕點(diǎn)擊彈出可拖拽的非模態(tài)對話框,結(jié)合完整實(shí)例形式分析了原生JavaScript實(shí)現(xiàn)的可拖拽非模態(tài)對話框?qū)崿F(xiàn)技巧與使用方法,需要的朋友可以參考下2023-04-04JavaScript 全面解析各種瀏覽器網(wǎng)頁中的JS 執(zhí)行順序
近來我通過一些測試以全面的解析網(wǎng)頁在各種瀏覽器中的JavaScript代碼的執(zhí)行順序,在這兒做個(gè)記錄。2009-02-02JavaScript實(shí)現(xiàn)網(wǎng)頁播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁播放器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09javascript實(shí)現(xiàn)的簡單的表單驗(yàn)證
這篇文章主要介紹了javascript實(shí)現(xiàn)的簡單的表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-07-07