JavaScript 键盘事件与键码值详解:获取按键信息的方法

作者:白露时间:2026-10-26 23:00:29浏览:460

本文介绍 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            
作者最新文章