JavaScript键盘事件常见用法实例分析
本文实例讲述了javascript键盘事件常见用法。分享给大家供大家参考,具体如下:
javascript 键盘事件有以下3种
keydown
键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键。
keypress
键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键。
keyup
键盘按键弹起,可以捕获组合键。
全局事件对象event
event.ctrlkey
功能键”ctrl”键是否按下。
event.altkey
功能键”alt”键是否按下。
event.shiftkey
功能键”shift”键是否按下。
event.keycode
键盘按键键码。
event.charcode
键盘非功能按键的ascii值,可以用其区分大小写。
string.fromcharcode(event.charcode)
将ascii值转化为对应的字符形式。
注意点
- keydown触发后,不一定触发keyup。比如此时单击鼠标右键。
- 其中prscrn 按键keypress、keydown和keyup 都不能捕获。
- keypress主要用来捕获数字(包括shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了f1-12、shift、alt、ctrl、insert、home、pgup、delete、end、pgdn、scrolllock、pause、numlock、{菜单键}、{开始键}和方向键外的ansi字符。
- keydown 和 keyup 的keycode区分小键盘和主键盘的数字字符。keypress 则不区分小键盘和主键盘的数字字符。
keycode | key |
---|---|
8 | backspace backspace |
9 | tab tab |
12 | clear |
13 | enter |
16 | shift_l |
17 | control_l |
18 | alt_l |
19 | pause |
20 | caps_lock |
27 | escape escape |
32 | space space |
33 | prior |
34 | next |
35 | end |
36 | home |
37 | left |
38 | up |
39 | right |
40 | down |
41 | select |
42 | |
43 | execute |
45 | insert |
46 | delete |
47 | help |
48 | 0 equal braceright |
49 | 1 exclam onesuperior |
50 | 2 quotedbl twosuperior |
51 | 3 section threesuperior |
52 | 4 dollar |
53 | 5 percent |
54 | 6 ampersand |
55 | 7 slash braceleft |
56 | 8 parenleft bracketleft |
57 | 9 parenright bracketright |
65 | a a |
66 | b b |
67 | c c |
68 | d d |
69 | e e eurosign |
70 | f f |
71 | g g |
72 | h h |
73 | i i |
74 | j j |
75 | k k |
76 | l l |
77 | m m mu |
78 | n n |
79 | o o |
80 | p p |
81 | q q at |
82 | r r |
83 | s s |
84 | t t |
85 | u u |
86 | v v |
87 | w w |
88 | x x |
89 | y y |
90 | z z |
96 | kp_0 kp_0 |
97 | kp_1 kp_1 |
98 | kp_2 kp_2 |
99 | kp_3 kp_3 |
100 | kp_4 kp_4 |
101 | kp_5 kp_5 |
102 | kp_6 kp_6 |
103 | kp_7 kp_7 |
104 | kp_8 kp_8 |
105 | kp_9 kp_9 |
106 | kp_multiply kp_multiply |
107 | kp_add kp_add |
108 | kp_separator kp_separator |
109 | kp_subtract kp_subtract |
110 | kp_decimal kp_decimal |
111 | kp_divide kp_divide |
112 | f1 |
113 | f2 |
114 | f3 |
115 | f4 |
116 | f5 |
117 | f6 |
118 | f7 |
119 | f8 |
120 | f9 |
121 | f10 |
122 | f11 |
123 | f12 |
124 | f13 |
125 | f14 |
126 | f15 |
127 | f16 |
128 | f17 |
129 | f18 |
130 | f19 |
131 | f20 |
132 | f21 |
133 | f22 |
134 | f23 |
135 | f24 |
136 | num_lock |
137 | scroll_lock |
187 | acute grave |
188 | comma semicolon |
189 | minus underscore |
190 | period colon |
192 | numbersign apostrophe |
210 | plusminus hyphen macron |
211 | |
212 | copyright registered |
213 | guillemotleft guillemotright |
214 | masculine ordfeminine |
215 | ae ae |
216 | cent yen |
217 | questiondown exclamdown |
218 | onequarter onehalf threequarters |
220 | less greater bar |
221 | plus asterisk asciitilde |
227 | multiply division |
228 | acircumflex acircumflex |
229 | ecircumflex ecircumflex |
230 | icircumflex icircumflex |
231 | ocircumflex ocircumflex |
232 | ucircumflex ucircumflex |
233 | ntilde ntilde |
234 | yacute yacute |
235 | oslash ooblique |
236 | aring aring |
237 | ccedilla ccedilla |
238 | thorn thorn |
239 | eth eth |
240 | diaeresis cedilla currency |
241 | agrave agrave atilde atilde |
242 | egrave egrave |
243 | igrave igrave |
244 | ograve ograve otilde otilde |
245 | ugrave ugrave |
246 | adiaeresis adiaeresis |
247 | ediaeresis ediaeresis |
248 | idiaeresis idiaeresis |
249 | odiaeresis odiaeresis |
250 | udiaeresis udiaeresis |
251 | ssharp question backslash |
252 | asciicircum degree |
253 | 3 sterling |
254 | mode_switch |
测试范例
<html> <body> <script type="text/javascript"> function appendtext(str) { document.body.innerhtml += (str+"<br/>"); } document.onkeydown = function(){ //如果长按的话,会持续触发keydown和keypress(如果有该事件的话) appendtext("onkeydown"); if(event.ctrlkey) { appendtext("ctrlkey"); } if(event.altkey) { appendtext("altkey"); } if(event.shiftkey) { appendtext("shiftkey"); } //无charcode属性,只有keypress才有该属性 if(event.charcode) { appendtext(string.fromcharcode(event.charcode)); } if(event.keycode) { appendtext(event.keycode); } //该语句只对chrome和edge有效,可以屏蔽keypress(只对chrome和edge浏览器有效) //event.returnvalue = false; }; document.onkeypress = function() { //keypress无法监听到组合键 appendtext("onkeypress"); if(event.ctrlkey) { appendtext("ctrlkey"); } if(event.altkey) { appendtext("altkey"); } if(event.shiftkey) { appendtext("shiftkey"); } //charcode是字母的unicode值 if(event.charcode) { appendtext(string.fromcharcode(event.charcode)); } } document.onkeyup = function() { appendtext("onkeyup"); } </script> </body> </html>
这里使用在线html/css/javascript代码运行工具:http://tools.jb51.net/code/htmljsrun测试上述代码,运行效果如下图所示:
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript操作dom技巧总结》、《javascript页面元素操作技巧总结》、《javascript事件相关操作与技巧大全》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: 栈和线性表的简单应用-数制转换
下一篇: 梅子酒做法简单,功效甚多,但不要贪杯哦