javascript中鍵盤事件用法實(shí)例分析
本文實(shí)例分析了javascript中鍵盤事件用法。分享給大家供大家參考。具體如下:
鍵盤事件包含onkeydown、onkeypress和onkeyup這三個(gè)事件
事件初始化
function keyDown(){} document.onkeydown = keyDown; //論按下鍵盤上的哪個(gè)鍵,都將調(diào)用KeyDown()函數(shù)。
DOM標(biāo)準(zhǔn)下
function keyDown(e) { var keycode = e.which; //取得對(duì)應(yīng)的鍵值(數(shù)字) var realkey = String.fromCharCode(e.which); //取得代表改鍵的真正字符 alert("按鍵碼: " + keycode + " 字符: " + realkey); } document.onkeydown = keyDown
IE下
function keyDown() { var keycode = event.keyCode; //IE下取得鍵值的方法 var realkey = String.fromCharCode(event.keyCode); alert("按鍵碼: " + keycode + " 字符: " + realkey); } document.onkeydown = keyDown
兼容的方法
function keyUp(e) { var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; var keyName = String.fromCharCode(currKey); alert("按鍵碼: " + currKey + " 字符: " + keyName); } document.onkeyup = keyUp;
使用原則:keydown事件對(duì)于功能按鍵來說是最有用的,而keypress事件對(duì)于可打印按鍵來說是最有用的
以下鍵碼值只有在文本框中才完全有效,如果在<body>標(biāo)記中使用,只有字母鍵、數(shù)字鍵和部分控制鍵可用,其字母鍵和數(shù)字鍵的鍵值與ASCII值相同
字母和數(shù)字鍵的鍵碼值(keyCode)
按鍵 鍵碼
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
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
數(shù)字鍵盤上的鍵的鍵碼值(keyCode) 功能鍵鍵碼值(keyCode)
按鍵 鍵碼
0 96
1 97
2 98
3 99
4 100
5 101
6 102
7 103
8 104
9 105
* 106
+ 107
Enter 108
- 109
. 110
/ 111
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
控制鍵鍵碼值(keyCode)
按鍵 鍵碼
BackSpace 8
Esc 27
Right Arrow 39
Left Arrow 37
Down Arrow 40
Up Arrow 38
-_ 189
.> 190
Spacebar 32
Tab 9
Clear 12
Page Up 33
Page Down 34
Enter 13
Insert 45
;: 186
Delete 46
`~ 192
/? 191
Num Lock 144
Control 17
Home 36
End 35
Shift 16
[{ 219
}] 221
\| 220
=+ 187
,< 188
'" 222
Cape Lock 20
Alt 18
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS學(xué)習(xí)之表格的排序簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫S學(xué)習(xí)之表格的排序簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-05-05JS瀏覽器導(dǎo)航欄navigator的一些冷知識(shí)
這篇文章主要為大家介紹了JS導(dǎo)航欄navigator的一些冷知識(shí)使用方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12JS實(shí)現(xiàn)獲取自定義屬性data值的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取自定義屬性data值的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript針對(duì)自定義屬性data的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12深入探討JavaScript異步編程中Promise的關(guān)鍵要點(diǎn)
這篇文章將全面深入地探討Promise,包括其前身、歷史、能力、優(yōu)點(diǎn)、缺點(diǎn)以及提供每個(gè)方法的案例,感興趣的小伙伴可以跟隨小編一學(xué)習(xí)一下2023-06-06微信小程序全局配置之tabBar實(shí)戰(zhàn)案例
tabBar相對(duì)而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tabBar的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08