JS键码（Keycode）|极客笔记

JS键码（Keycode）

在编写JavaScript程序时，我们经常需要检测用户在键盘上按下的按键，并根据不同的按键执行不同的操作。这就需要用到键码（keycode）。键码是用于表示键盘按键的数字值，每个按键都对应着一个特定的键码。

键码的作用

键码在前端开发中起着重要的作用，它可以用于以下几方面：

事件处理：可以根据特定的键码来触发相应的事件处理函数，例如，按下回车键触发提交表单的事件。
快捷键：可以使用键码来实现快捷键功能，提供更好的用户体验，例如，按下Ctrl + S保存页面。
游戏开发：在游戏开发中，键码是必不可少的，可以根据用户按下的按键来控制游戏对象的移动、跳跃等操作。

键盘事件

在JavaScript中，我们可以通过键盘事件来捕获用户按下、释放和按住键盘上的按键。常见的键盘事件有：

keydown：当用户按下键盘上的按键时触发。如果按住不放，会重复触发该事件。
keyup：当用户释放键盘上的按键时触发。
keypress：当用户按下键盘上的字符按键时触发。

在键盘事件中，我们可以通过event.keyCode属性来获取按下的按键的键码。下面是一个使用键盘事件和键码的示例代码：

document.addEventListener('keydown', function(event) {
  console.log('按下的键码为：', event.keyCode);
});

运行上述代码后，当我们按下键盘上的任意按键时，在控制台中就会输出对应的键码。

键码的兼容性问题

需要注意的是，event.keyCode在不同的浏览器中可能有不同的取值。为了兼容不同浏览器，我们可以使用event.key和event.code属性来替代event.keyCode。

event.key：表示按下的按键的字符。如果是功能键（如Shift、Enter、Backspace等），则返回功能键的名称（如”Shift”、”Enter”、”Backspace”）。
event.code：表示按下的按键的标准键码。这些键码与物理键盘上按键的位置相对应，具有更好的可靠性和一致性。

下面是一个示例代码，演示了如何使用event.key和event.code来获取键码：

document.addEventListener('keydown', function(event) {
  console.log('按下的键码为：', event.keyCode);
  console.log('按下的按键为：', event.key);
  console.log('按下的标准键码为：', event.code);
});

运行上述代码后，当我们按下键盘上的任意按键时，在控制台中就会输出按键的键码、按键和标准键码。

常见键码列表

下面是一些常见的键码及其对应的按键：

退格键 Backspace：8
制表符键 Tab：9
Enter键 Enter：13
Shift键 Shift：16
Ctrl键 Control：17
Alt键 Alt：18
Caps Lock键 CapsLock：20
Esc键 Escape：27
空格键 Space：32
Page Up键 PageUp：33
Page Down键 PageDown：34
End键 End：35
Home键 Home：36
左箭头键 ArrowLeft：37
上箭头键 ArrowUp：38
右箭头键 ArrowRight：39
下箭头键 ArrowDown：40
删除键 Delete：46
0到9键：48到57
A到Z键：65到90
F1到F12键：112到123

注意，这里只列举了一些常用的键码，实际上键盘上的每个按键都有对应的键码。我们可以通过输出event.keyCode来获取其他按键的键码。

键码应用示例

除了上述的事件处理和快捷键功能，键码还可以用于其他各种应用场景。下面是三个使用键码的实际示例：

示例一：实现按键控制

document.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
    case 37:
      console.log('按下了左箭头键');
      break;
    case 38:
      console.log('按下了上箭头键');
      break;
    case 39:
      console.log('按下了右箭头键');
      break;
    case 40:
      console.log('按下了下箭头键');
      break;
  }
});

运行以上代码后，当我们按下键盘上的箭头键时，在控制台中就会输出对应的提示信息。

示例二：实现快捷键

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.keyCode === 83) {
    event.preventDefault();
    console.log('按下了Ctrl + S');
  }
});

运行上述代码后，当我们按下键盘上的Ctrl + S组合键时，在控制台中就会输出对应的提示信息，并阻止默认的保存操作。

示例三：监听特定的功能键

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('按下了回车键');
  } else if (event.code === 'Space') {
    console.log('按下了空格键');
  }
});

运行以上代码后，当我们按下键盘上的回车键或空格键时，在控制台中就会输出对应的提示信息。

小结

本文详细介绍了JavaScript中的键码（keycode），包括键码的作用、常见的键盘事件和键码的兼容性问题。我们可以利用键码实现事件处理、快捷键和游戏开发等功能，提供更好的用户体验。在实际开发中，我们可以根据不同的需求使用event.keyCode、event.key或event.code来获取用户按下的键码。