JavaScript键盘事件常见用法实例分析
程序员文章站
2023-09-01 22:10:20
本文实例讲述了javascript键盘事件常见用法。分享给大家供大家参考，具体如下：
javascript 键盘事件有以下3种
keydown
键盘按键按下（如果按着...
本文实例讲述了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程序设计有所帮助。
上一篇： 夏天消暑冷饮不宜多吃喝 吃冷饮注意这些