利用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主要用來(lái)接收字母、數(shù)字等ANSI字符。KeyDown 和 KeyUP 事件過(guò)程通常可以捕獲鍵盤除了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ā)生的。由于一般按下鍵盤的鍵往往會(huì)立即放開（這和鼠標(biāo)不同），所以這兩個(gè)事件使用哪個(gè)差別不大。而且，up和其他兩者還有一個(gè)區(qū)別：要判斷key修改后的狀態(tài)必須用up。
我們可以利用keydown事件來(lái)阻止用戶的輸入，比如某輸入域只能輸入數(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主要用來(lái)接收字母、數(shù)字等ANSI字符。KeyDown 和 KeyUP 事件過(guò)程通常可以捕獲鍵盤除了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ā)生的。由于一般按下鍵盤的鍵往往會(huì)立即放開（這和鼠標(biāo)不同），所以這兩個(gè)事件使用哪個(gè)差別不大。而且，up和其他兩者還有一個(gè)區(qū)別：要判斷key修改后的狀態(tài)必須用up。
我們可以利用keydown事件來(lái)阻止用戶的輸入，比如某輸入域只能輸入數(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將16進(jìn)制的字符串轉(zhuǎn)換為10進(jìn)制整數(shù)hex
這篇文章主要介紹了javascript將16進(jìn)制的字符串轉(zhuǎn)換為10進(jìn)制整數(shù)hex,需要的朋友可以參考下2020-03-03
用JS實(shí)現(xiàn)簡(jiǎn)單的屏幕錄像機(jī)功能
這篇文章主要給大家介紹了如何用JS實(shí)現(xiàn)簡(jiǎn)單的屏幕錄像機(jī),文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
JS判斷輸入字符串長(zhǎng)度實(shí)例代碼(漢字算兩個(gè)字符,字母數(shù)字算一個(gè))
下面小編就為大家?guī)?lái)一篇JS判斷輸入字符串長(zhǎng)度實(shí)例代碼(漢字算兩個(gè)字符,字母數(shù)字算一個(gè))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Javascript在IE或Firefox下獲取鼠標(biāo)位置的代碼
由于Firefox和IE等瀏覽器之間對(duì)JS解釋的方式不一樣，F(xiàn)irefox下面獲取鼠標(biāo)位置不能夠直接使用clientX來(lái)獲取。網(wǎng)上說(shuō)的一般都是觸發(fā)mousemove事件才行。我這里有兩段代碼，思路都一樣，就是風(fēng)格不同。2009-12-12
這篇文章主要介紹了webpack自動(dòng)化打包的相關(guān)知識(shí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-02-02
Bootstrap table表格初始化表格數(shù)據(jù)的方法
這篇文章主要介紹了Bootstrap-table表格初始化表格數(shù)據(jù)的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
150行代碼帶你實(shí)現(xiàn)微信小程序中的數(shù)據(jù)偵聽
在這篇文章中, 我將用150行代碼, 手把手帶你打造一個(gè)小程序也可以使用的偵聽器，感興趣的朋友跟隨小編一起看看吧2019-05-05
利用JS實(shí)現(xiàn)加減簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版加減計(jì)算器，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08