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程序设计有所帮助。
相关文章
JavaScript实践之使用Canvas开发一个可配置的大转盘抽奖功能
公司项目搞优惠活动,让做一个转盘抽奖的活动,这篇文章主要给大家介绍了关于JavaScript实践之使用Canvas开发一个可配置的大转盘抽奖功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11全面解析Bootstrap中tooltip、popover的使用方法
这篇文章主要为大家详细解析了Bootstrap中tooltip、popover的使用方法,了解提示框、弹出框的实现原理,感兴趣的朋友可以参考一下2016-06-06深入理解JavaScript和TypeScript中的class
class 声明创建一个基于原型继承的具有给定名称的新类,下面这篇文章主要给大家介绍了关于JavaScript和TypeScript中class的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。2018-04-04
最新评论