现代浏览器标准中已不再使用keyCode属性,而改用event.key,但是掌握常用按键及其传统keyCode值对我们的日常开发仍会有很大的帮助,本文分享了JavaScript 中提供的所有键盘按键和 keyCode值。
event.key和keyCode的区别event.key 提供了按下的键的值,使代码更容易理解和维护。例如,按下 A 键会产生"a "或" A",这取决于是否同时按下了 shift 键。keyCode是一个数值,已被弃用,未来的网络标准可能不再支持。它的可读性较差,如果不参考代码列表,很难确定该值代表哪个按键。常用键值及其keyCode下面列出了现代开发实践中的event.key值及其相应的keyCode值(已弃用),以供参考:
字母及数字键A-Z:event.key 为"a"至"z"(小写不含 shift 键,大写含 shift 键),keyCode为65至900-9:event.key 为"0"至"9",顶行数字的keyCode为48至57特殊字符(因键盘布局而异)空格:event.key 为"" ,keyCode为32回车:event.key 为 "Enter",keyCode为13Escape: event.key 为"Escape",keyCode为27控制键Shift:event.key为"Shift",keyCode为16Control(Ctrl):event.key为"Control",keyCode为17Alt:event.key为"Alt",keyCode为18Backspace:event.key为"Backspace",keyCode为8Tab:event.key为"Tab",keyCode为9箭头键左:event.key为"ArrowLeft",keyCode为37上:event.key为"ArrowUp",keyCode为38右:event.key为"ArrowRight",keyCode为39下:event.key为"ArrowDown",keyCode为40功能键F1-F12:event.key为"F1"至"F12",keyCode为112至123检测按键操作事件检测按键动作时,请使用event.key:
代码语言:javascript代码运行次数:0运行复制document.addEventListener('keydown', (event) => {
console.log(`Key pressed: ${event.key}`);
});为什么要从keyCode迁移到event.key从keyCode转向event.key有几个原因:
可读性:event.key更易于理解,无需参考对应文档。国际化:event.key对按键物理位置的依赖性较小,因此更适合国际应用。过时和未来支持: 现代网络标准建议不要使用keyCode,因为未来的浏览器和设备可能不支持它。