快捷導(dǎo)航

使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event）

更新時(shí)間：2019年11月07日 10:48:20 作者：風(fēng)雨同舟z

這篇文章主要介紹了使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、監(jiān)聽(tīng)全局鍵盤(pán)按下事件，例如監(jiān)聽(tīng)全局回車(chē)事件

$(document).keydown(function(event){
 if(event.keyCode == 13){
  alert('你按下了Enter'); 
 }
});

2、監(jiān)聽(tīng)某個(gè)組件鍵盤(pán)按下事件，例如監(jiān)聽(tīng)id為btn的button組件的回車(chē)按下事件

$("#btn").keydown(function(event){
 if(event.keyCode==13){
  alert('你按下了Enter');      
 }
});

3、如果是要監(jiān)聽(tīng)組合鍵，例如監(jiān)聽(tīng)ctrl+c

$(document).keyup(function(event){
　　if(event.ctrlKey && event.keyCode==67){
　　　　alert('你按下了CTRL+C')
　　}
});

4、詳細(xì)keyCode值列表

js keyup、keypress和keydown事件詳解

js keyup、keypress和keydown事件都是有關(guān)于鍵盤(pán)的事件

當(dāng)一個(gè)按鍵被pressed 或released在每一個(gè)現(xiàn)代瀏覽器中，都可能有三種客戶端事件。

keydown event
keypress event
keyup event

keydown事件發(fā)生在鍵盤(pán)的鍵被按下的時(shí)候，接下來(lái)觸發(fā)keypress事件。 keyup 事件在按鍵被釋放的時(shí)候觸發(fā)。

這三個(gè)事件在頁(yè)面中的使用方法如下例：

<input id="testkeyevent" name="testkeyevent" onKeyUp="keyup()" />
<input id="testkeyevent" name="testkeyevent" onkeypress="keypress()" />
<input id="testkeyevent" name="testkeyevent" onkeydown="keydown()" />

對(duì)應(yīng)的js函數(shù)：

function keyup(){ ...}
function keypress(){ ...}
function keydown(){ ...}

注意:

KeyDown觸發(fā)后，不一定觸發(fā)KeyUp，當(dāng)KeyDown 按下后，拖動(dòng)鼠標(biāo)，那么將不會(huì)觸發(fā)KeyUp事件。
KeyPress主要用來(lái)捕獲數(shù)字(注意：包括Shift+數(shù)字的符號(hào))、字母（注意：包括大小寫(xiě)）、小鍵盤(pán)等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開(kāi)始鍵}和方向鍵外的ANSI字符
KeyDown 和KeyUp 通?？梢圆东@鍵盤(pán)除了PrScrn所有按鍵(這里不討論特殊鍵盤(pán)的特殊鍵）
KeyPress 只能捕獲單個(gè)字符
KeyDown 和KeyUp 可以捕獲組合鍵。
KeyPress 可以捕獲單個(gè)字符的大小寫(xiě)
KeyDown和KeyUp 對(duì)于單個(gè)字符捕獲的KeyValue 都是一個(gè)值，也就是不能判斷單個(gè)字符的大小寫(xiě)。
KeyPress 不區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符。
KeyDown 和KeyUp 區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符。
其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。

在使用鍵盤(pán)的時(shí)候，通常會(huì)使用到CTRL+SHIFT+ALT 類(lèi)似的組合鍵功能。對(duì)于此，我們?nèi)绾蝸?lái)判定？

通過(guò)KeyUp 事件能夠來(lái)處理（這里說(shuō)明一下為什么不用KeyDown，因?yàn)樵谂卸↘eyDown的時(shí)候，CTRL、SHIFT和ALT 屬于一直按下?tīng)顟B(tài)，然后再加另外一個(gè)鍵是不能準(zhǔn)確捕獲組合鍵，所以使用KeyDown 是不能準(zhǔn)確判斷出的，要通過(guò)KeyUp 事件來(lái)判定）

這里簡(jiǎn)單的列舉出CTRL+其它鍵的組合判定代碼：

private void Form3_KeyUp(object sender, KeyEventArgs e){
if (e.Control){
MessageBox.Show("KeyUp:Ctrl+" + e.KeyValue.ToString());
}
}

捕獲PrScrn按鍵事件

通過(guò)一種鉤子的方式可以判定PrScrn 按鍵事件，鉤子可以獲取任何鍵盤(pán)事件。
以下是一些鍵盤(pán)上的鍵對(duì)應(yīng)的Code：以下是一些鍵盤(pán)上的鍵對(duì)應(yīng)的Code：

鍵盤(pán)按鍵	對(duì)應(yīng)的數(shù)碼
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
Space	32
page down	34
end	35
home	36
arrow left	37
arrow up	38
arrow right	39
arrow down	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
left window key	91
right window key	92
select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121

總結(jié)

以上所述是小編給大家介紹的使用JS監(jiān)聽(tīng)鍵盤(pán)按下事件（keydown event），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: