键盘事件值（键码、元键等）

当 KeyboardEvent 触发时，您可以测试按下了哪个键，因为该事件包含您可以编写逻辑来处理的信息。

document.addEventListener("keydown", function(event) {
  console.log(event.which);
})

例如，按下 a，您将获得 65。显然，最好是针对 which 编写逻辑，因为 keyCode 和 charCode 很复杂

event.which 属性将 event.keyCode 和 event.charCode 规范化。建议监控 event.which 以获取键盘键输入。

并且:

在按键事件中，按下的键的 Unicode 值存储在 keyCode 或 charCode 属性中，但不会同时存储在两者中。如果按下的键生成一个字符（例如“a”），则 charCode 设置为该字符的代码，并尊重字母大小写。（即，charCode 会考虑 Shift 键是否被按下）。否则，按下的键的代码将存储在 keyCode 中。

测试工具

键码值

以下表格包含来自 event.which 的值。

键	代码
退格键	8
制表符	9
回车键	13
Shift 键	16
Ctrl 键	17
Alt 键	18
暂停/中断	19
大写锁定	20
Esc 键	27
（空格）	32
Page Up	33
Page Down	34
End	35
Home	36
左箭头	37
上箭头	38
右箭头	39
下箭头	40
Insert	45
Delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68

键	代码
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
左 Windows 键	91
右 Windows 键	92
选择键	93
数字小键盘 0	96
数字小键盘 1	97
数字小键盘 2	98
数字小键盘 3	99
数字小键盘 4	100
数字小键盘 5	101
数字小键盘 6	102
数字小键盘 7	103

键	代码
数字小键盘 8	104
数字小键盘 9	105
乘号	106
加号	107
减号	109
小数点	110
除号	111
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123
Num Lock	144
Scroll Lock	145
分号	186
等号	187
逗号	188
连字符	189
句点	190
正斜杠	191
重音符	192
左括号	219
反斜杠	220
右括号	221
单引号	222

Zell Liew 发现，在 Firefox 中，这 3 个键码与其他浏览器不同

; 在 Firefox 中为 59，但在其他浏览器中为 186。
= 在 Firefox 中为 61，但在其他浏览器中为 187。
- 在 Firefox 中为 173，但在其他浏览器中为 189。

这些键码值仅在 keydown 和 keyup 事件期间有效。在 Mac 上，keypress 事件会提供完全不同的代码集。例如

键	`event.which` 在 keydown 中	`event.which` 在 keypress 中
a	65	97
b	66	98
c	67	99

Ben Colegate

# 2012 年 6 月 26 日

jQuery 建议使用 e.which 而不是 e.keyCode，因为它在所有浏览器中都是标准化的。

它还会考虑 mouseup 和 mousedown。

我不是要搞笑，只是想帮忙！

https://api.jqueryjs.cn/event.which/

Ben Colegate

评论的永久链接# 2012 年 6 月 26 日

我明显是说 mouseup，而不是 mouseus！
Chris

评论的永久链接# 2012 年 6 月 27 日

我同意这一点，我很久以前就停止使用 e.keyCode 了，因为我发现 e.which 的支持更广泛。
ardianzzz

评论的永久链接# 2012 年 7 月 3 日

jQuery Hotkeys 插件怎么样？
https://github.com/tzuryby/jquery.hotkeys

Hugo

# 2012 年 6 月 27 日

很棒的小贴士 Chris，感谢分享！

我从来没有想到用 jQuery 了解键码会这么简单。

John Jimenez

# 2012 年 6 月 29 日

这是一篇关于键码支持和触发事件的不错的文章（有点过时了）。
我与该链接没有任何关联，只是我前几天偶然发现的，它恰好在这里也有效。
http://unixpapa.com/js/key.html

JohnMotylJr

# 2013 年 3 月 11 日

太棒了，我还在使用它

var code = (e.keyCode ? e.keyCode : e.which);

Chris

评论的永久链接# 2014 年 11 月 7 日

我仍然使用它，并且会一直使用它，直到每个浏览器都使用相同的属性！这很可能永远不会发生，所以我建议继续使用它！我的意思是，这里有一半的傻瓜说“我从未知道用 jQuery 这么简单”，他们一定不知道 jQuery 是一个 JavaScript 库 -_- 老程序员总是比这些新手“jQuery”程序员更厉害。他们真让我发笑！
spyter

评论的永久链接# 2015 年 6 月 12 日

var code = e.keyCode || e.which; // 是您所拥有内容的更短/更简洁的版本
J G

评论的永久链接# 2015 年 11 月 25 日

@spyter: 只需知道，如果 e.keyCode === 0，则它将是假值，并将贯穿到 e.which（这可能不是问题，但有可能）。
Thato

评论的永久链接# 2017 年 7 月 23 日

哈哈哈，太聪明了

James Larsson

# 2013 年 9 月 12 日

我发现 Apple 命令键是 224，而该列表中没有。

Michael Coyne

评论的永久链接# 2015 年 6 月 3 日

仅在 Firefox 中，在 Chrome 中为 93
Michael Coyne

评论的永久链接# 2015 年 6 月 3 日

抱歉，我的意思是 91
Pratyush Tewari

评论的永久链接# 2017 年 9 月 11 日

左命令键是 91，右命令键是 93。因此，在您的代码中，请检查两者。

saurabh

# 2014 年 4 月 15 日

我想要 alt+q = 键码？

Mottie

评论的永久链接# 2014 年 7 月 25 日
要检测它，您需要查看 altKey 值
```
if (event.altKey && event.which === 81) {
    // alt-q being used
}
```
zixuan

评论的永久链接# 2016 年 11 月 21 日

我想要 alt+g = 键码？

Mottie

# 2014 年 7 月 25 日

@chriscoyier 该表似乎缺少 event.which 值为 32 的“空格” :)

Crystal

# 2014 年 8 月 21 日

其他语言的键码呢？

Veronica

# 2014 年 9 月 18 日

刚刚发现，对于 event.which，仅在 FF 中，退格键是 8，箭头键是 0。在 Chrome 中，它不会为两者设置任何值。

Aidan

评论的永久链接# 2014 年 11 月 13 日

您正在使用 element.onkeypress，要获取箭头键，请使用 element.onkeydown。

Ali.MD

# 2014 年 12 月 4 日

感谢您提供精确的复制粘贴，而且一次也不看！
我的意思是：“右括号”，只是为了好玩；)

Ali.MD

# 2014 年 12 月 4 日

请还添加这些
NUM_LOCK_MAC: 12,
F13: 124,
F14: 125,
F15: 126,
F16: 127,
F17: 128,
F18: 129,
F19: 130,

策略游戏

# 2015 年 1 月 12 日

我想要 alt+q = 键码？

Ben Zörb

# 2015 年 1 月 14 日

在使用 keyup 或 keydown 时，有一些冲突的键码，它们属于两个字符
188 , <
190 . >
191 / ?
192 ` ~
219 [ {
220 \ |
221 ] }
222 ‘ “

Bhumi

# 2015年2月6日

我尝试了以下操作，但不起作用

var DisableArrowKeys = function(e){
   if(e.keyCode == 40){
                return false;
   }
   if(e.keyCode == 39){
                return false;
    }
    return true;
}
$("#id").bind("keyup change", DisableArrowKeys);
$("#id").bind("keydown change", DisableArrowKeys);

sreeee

# 2016年3月22日

$('#id').bind('keydown', function(e){
    if(e.keyCode == '39' || e.keyCode == '40'){
        e.preventDefault();
    }
});

我认为这对你会有帮助

amit

评论永久链接# 2016年11月18日

使用Google音译API，但是使用keypress。但我没有keypress的代码，请帮忙使用keypress使用Google API
zixuan

评论永久链接# 2016年11月21日

71: g

alt+g
18: alt
按下alt键和g键。

Albert Straub

# 2015年6月28日

如何区分大写字母和小写字母？

Carl Dolerado

评论永久链接# 2015年8月19日

你无法区分大写和小写，因为keycode处理的是按下键，因此它不会区分大写和小写，就像它不会区分0和）一样。
Mottie

评论永久链接# 2016年2月28日

在输入大写字母时，keyCode 会返回不同的值，但仅在 "keypress" 事件中！

试试看这个演示，你就会发现 "keyup" 和 "keydown" 总是返回大写字母的 keyCode，而 "keypress" 会返回小写字母的值。

Marc

# 2015年8月24日

Firefox 15+ 返回 173 而不是 189 代表连字符。 jQuery 的 event.which 没有对此进行规范化。之前的版本返回 109。

Marc

# 2015年8月24日

这个列表非常好，也指出了不一致的地方
http://www.javascripter.net/faq/keycodes.htm

上面列表中的 186、187 和 189 不安全。

kenny

# 2015年10月7日

一个健壮的 Javascript 库，用于捕获键盘输入和输入的键组合。它没有依赖关系。

http://jaywcjlove.github.io/hotkeys/

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('you pressed ctrl+a!');break;
        case "ctrl+b":alert('you pressed ctrl+b!');break;
        case "r":alert('you pressed r!');break;
        case "f":alert('you pressed f!');break;
    }
});

hotkeys 理解以下修饰符：⇧、shift、option、⌥、alt、ctrl、control、command 和 ⌘。

以下特殊键可用于快捷键：backspace、tab、clear、enter、return、esc、escape、space、up、down、left、right、home、end、pageup、pagedown、del、delete 和 f1 到 f19。

Sharkes Monken

# 2015年12月24日

谢天谢地！很棒的文章，一直在寻找它，终于可以用“KeyCode”方法识别键盘代码了 :) 干得好

Muhammad Yasir

# 2016年1月19日

很棒的文章

Sven

# 2016年4月23日

亲爱的朋友们，我修改游戏，但我仍然没有找到在 INI 文件中为向上箭头和向下箭头的键绑定设置什么。
如果有人能帮我，我很乐意听到你的消息。
Sven

danziger

评论永久链接# 2020年11月28日

您可以使用 Key.js 轻松检查 JavaScript KeyboardEvent 属性（e.key、e.code、e.which、
e.keyCode… 等等）: https://keyjs.dev

这些可能是游戏中导航最相关的属性

向上箭头: 38
向左箭头: 37
向下箭头: 40
向右箭头: 39
数字键盘向上: 104
数字键盘向左: 100
数字键盘向下: 98
数字键盘向右: 102
W: 87
A: 65
S: 83
D: 68

Mottie

# 2016年5月9日

charCode、keyCode 和 which 正在被弃用。它们将很快被 event.key 替换，它将返回命名键

document.querySelector('input').addEventListener('keydown', function(event) {
  console.log(event.key);
});

因此，如果在控制台中输入“Hello World”，结果将是

Shift
H
e
l
l
o

Shift
W
o
r
l
d

对于移位字符，event.shiftKey 仍然为真，但有一个新的方法可以检查修饰键（shift、alt、altGr、ctlr、capsLock、meta、OS 等），名为 getModifierState

document.querySelector('input').addEventListener('keydown', function(event) {
    console.log(event.getModifierState());
});

它将返回如下值

Shift
Alt
AltGraph
Control
CapsLock
Meta
OS

Hrach

# 2016年5月15日

最低的 keycode 是 8 有什么原因吗？还是它仅仅是无缘无故的？

Mottie

评论永久链接# 2016年5月15日

keyCodes 基于 ascii 表。

Mohamed Hussain S H

# 2016年5月16日

在文章中共享的 Codepen 中，event.which 没有区分大小写，当我按下小写“a”或大写“A”时，始终返回 65。我在这里理解错了吗？

Mottie

评论永久链接# 2016年5月17日

keypress 事件中的代码将提供输入字符的正确 ASCII 字符等效项。试试这个演示。

请注意，keypress 不包含某些特殊键的值，例如箭头键、插入键、删除键、Home 键、Page Up/Down 键等。

Paco

# 2016年7月12日

我想知道 ctrlKey+c 的keycode是多少？

我尝试了这些

only: function(event) {

    if( event.ctrlKey && event.which === 86)  {
                    event.preventDefault();
       }
 }

但它没有执行 :( … 你还有其他想法吗 :)

谢谢

Ramana

# 2017年1月15日

如何获取 Ctrl+space 事件？

Ajin

# 2017年2月15日

有人知道按下 1 键后，输入框会显示 I（大写字母 I(i)）吗？

Mottie

# 2017年2月15日

@chriscoyier 这篇文章需要尽快更新… 大多数浏览器现在支持新的键盘事件，包括 getModifierState()。

http://codepen.io/Mottie/pen/bgZxod/

Paolo

# 2017年2月17日

在 Safari 9 上监听 keydown 时，我得到不一致的 evt.which 值，特别是对于像 +、- 等符号…

如果我监听 keypress，我会得到合理的值（ascii 值）。

对于非字符键（如 箭头键）我需要坚持使用 keydown。

此外，如果您不想在用户按下并保持键位时事件被多次触发，那么 keypress 会很烦人。

Subtain

# 2017年11月6日

您好

我需要在 JS 代码中获得一些帮助，每当我输入任何字母单词，例如 a 或 b，我想要结果 1 + 2 = 3？这可能吗？请在这方面提供帮助

Edward Gioja

# 2017年12月10日

有没有一种方法可以编写在 WINDOWS 和 MAC 上都能正常运行的代码？

e.which 返回不同的值

键	Windows	MAC
0	48	186
1	49	161
2	50	8482
3	51	163
4	52	162
5	53	8734
6	54	167
7	55	182
8	56	8226
9	57	170

Luis

# 2018年6月7日

您好。
如何在大多数浏览器中通过按钮点击执行 Ctrl + D 操作？
类似这样
“收藏夹

RarestAiden

# 2019年3月3日

您好，如何输入数字并使其达到目标，比如我有一个计算器，我可以输入数字而不是按下它们

John Perry

# 2019年4月13日

我可能错了，但看起来 e.key 现在是支持最广泛的推荐方法。

Phosphorus

# 2021年2月17日

现在 which、charCode 和 keyCode 已经弃用。

Noradavis

# 2022年6月27日

按下的键的 Unicode 值存储在 keyCode 或 charCode 属性中，但不会同时存储在两个属性中。如果按下的键生成一个字符，charCode 将设置为该字符的代码，区分大小写。（即 charCode 考虑

https://www.clickercounter.org/spacebar-clicker

Asidert

# 2022年11月27日

前几天我一直在想如何输入数字并使其达到目标。假设我有一个计算器，我可以输入数字而不是按下计算器上的按钮。

输入类型 86

# 2024年8月8日

很棒的文章！只想补充一下，输入类型 86 的 KeyboardEvent 值代表一个特定的键事件。了解这些值可以真正帮助您在应用程序中进行高级事件处理！

测试工具

键码值

评论

发表评论 取消回复

发表评论取消回复