JavaScript 键盘事件与键码值详解:获取按键信息的方法
本文介绍 JavaScript 中 keydown、keypress 和 keyup 三个键盘事件句柄的区别,以及如何处理实键与虚键。通过示例代码展示如何兼容不同浏览器获取按键码(keyCode),并区分字符码与按键码,最后附上完整的键码对照表供参考。
JavaScript 键盘事件概述
在 JavaScript 中,处理键盘输入主要涉及三个事件句柄:keydown、keypress 和 keyup。
这三个事件分别对应不同的按键状态:keydown 表示按键被按下(此时按键尚未抬起);keypress 表示点击按键(即按下并抬起的完整过程,通常用于可打印字符);keyup 表示按键抬起(按键释放后触发)。
按键的分类
按键分类:实键与虚键
按键通常被分为“实键”和“虚键”两类。
所谓“实键”,是指那些能够直接显示并打印出来的字符按键,例如字母“A”、数字“1”或标点符号“?”等。
“虚键”则是指那些不直接产生可见字符、主要用于控制操作的按键,例如“Ctrl”、“Alt”、“Shift”以及“方向键”等。
需要注意的是,IE 浏览器在处理虚键时存在特殊情况:虚键不会触发 keypress 事件,因此必须使用 keydown 或 keyup 事件来捕获这些按键。
按键码和字符码
按键码与字符码的区别
按键码(keyCode)是计算机用于识别不同物理按键的编码,每个按键都对应一个唯一的按键码。
字符码则是可打印实键特有的属性,它对应键盘上实际显示的字符编码。
可以通过 String.fromCharCode() 方法将按键码转换为对应的字符码。
详细的按键码与字符码对应关系表可在本文末尾查阅。
获取实键
获取按键码的代码实现
以下是获取按键码的基础代码示例:
function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
keyCode = e.keyCode || e.which || e.charCode;
alert(keyCode);
} 对上述代码进行简要解释:
1. 参数 e 是 Firefox 等标准浏览器支持的 JS 隐藏变量,代表当前“事件”对象;而在 IE 系列浏览器中,没有 e 参数,而是通过 window.event 来表示事件。因此,var e = e || window.event; 这一行的作用是兼容不同浏览器,获取当前正在发生的事件对象。
2. e.keyCode、e.which 和 e.charCode 均用于获取按键码,但不同浏览器支持的属性写法有所不同,代码中通过 || 运算符进行兼容性处理。
获取虚键的状态检测
接下来介绍如何获取虚键的状态:
以下是检测控制键(虚键)的代码示例:
function getKeyCode(e) {
var keyCode = 0;
var e = e || window.event;
if (e.ctrlKey) alert("ctrlKey pressed");
if (e.altKey) alert("altKey pressed");
if (e.shiftKey) alert("shiftKey pressed");
} | 字母和数字键的键码值(keyCode) | |||||||
| 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
| A | 65 | J | 74 | S | 83 | 1 | 49 |
| B | 66 | K | 75 | T | 84 | 2 | 50 |
| C | 67 | L | 76 | U | 85 | 3 | 51 |
| D | 68 | M | 77 | V | 86 | 4 | 52 |
| E | 69 | N | 78 | W | 87 | 5 | 53 |
| F | 70 | O | 79 | X | 88 | 6 | 54 |
| G | 71 | P | 80 | Y | 89 | 7 | 55 |
| H | 72 | Q | 81 | Z | 90 | 8 | 56 |
| I | 73 | R | 82 | 0 | 48 | 9 | 57 |
| 数字键盘上的键的键码值(keyCode) | 功能键键码值(keyCode) | ||||||
| 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
| 0 | 96 | 8 | 104 | F1 | 112 | F7 | 118 |
| 1 | 97 | 9 | 105 | F2 | 113 | F8 | 119 |
| 2 | 98 | * | 106 | F3 | 114 | F9 | 120 |
| 3 | 99 | + | 107 | F4 | 115 | F10 | 121 |
| 4 | 100 | Enter | 108 | F5 | 116 | F11 | 122 |
| 5 | 101 | - | 109 | F6 | 117 | F12 | 123 |
| 6 | 102 | . | 110 | ||||
| 7 | 103 | / | 111 | ||||
| 控制键键码值(keyCode) | |||||||
| 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
| BackSpace | 8 | Esc | 27 | Right Arrow | 39 | -_ | 189 |
| Tab | 9 | Spacebar | 32 | Dw Arrow | 40 | .> | 190 |
| Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 |
| Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 |
| Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
| Control | 17 | Home | 36 | ;: | 186 | \| | 220 |
| Alt | 18 | Left Arrow | 37 | =+ | 187 | ]} | 221 |
| Cape Lock | 20 | Up Arrow | 38 | ,< | 188 | '" | 222 |
| 多媒体键码值(keyCode) | |||||||
| 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
| 音量加 | 175 | ||||||
| 音量减 | 174 | ||||||
| 停止 | 179 | ||||||
| 静音 | 173 | ||||||
| 浏览器 | 172 | ||||||
| 邮件 | 180 | ||||||
| 搜索 | 170 | ||||||
| 收藏 | 171 | ||||||
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
