Typescript 事件 keyCode

在 Typescript 中，我们可以使用 keyCode 属性来获取用户按下的键的数字值。这个数字值与 ASCII 码表有关，它代表着不同的键。

1. 使用键盘事件获取 keyCode

当用户按下键盘上的任何键时，都会触发一个键盘事件。我们可以使用这个事件来获取 keyCode 属性，从而获知用户按下的是哪个键。

document.addEventListener('keydown', (event: KeyboardEvent) => {
  console.log(event.keyCode);
});

上面的代码中，我们使用了 addEventListener 方法来监听键盘事件，当事件发生时，我们会在控制台输出用户按下键的数字值。

2. 键码对照表

每个键都有一个对应的数字值，这个数字值在不同的浏览器中有所不同。下面是常见的键的数字值（参考自 w3schools.com）：

| 键 | 数字值 | | --- | --- | | 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 | | F1 | 112 | | F2 | 113 | | F3 | 114 | | F4 | 115 | | F5 | 116 | | F6 | 117 | | F7 | 118 | | F8 | 119 | | F9 | 120 | | F10 | 121 | | F11 | 122 | | F12 | 123 | | Shift | 16 | | Ctrl | 17 | | Alt | 18 | | Enter | 13 | | Backspace | 8 | | Tab | 9 | | Esc | 27 | | Spacebar | 32 | | PageUp | 33 | | PageDown | 34 | | End | 35 | | Home | 36 | | Insert | 45 | | Delete | 46 | | LeftArrow | 37 | | UpArrow | 38 | | RightArrow | 39 | | DownArrow | 40 |

3. 使用键码进行判断

有了键的数字值，我们可以根据情况来实现不同的功能。例如，我们可以判断用户是否按下了回车键：

document.addEventListener('keydown', (event: KeyboardEvent) => {
  if (event.keyCode === 13) {
    // 用户按下了回车键，执行相应的功能
  }
});

上面的代码中，我们使用了 if 语句来判断用户是否按下了回车键，如果是，我们就执行相应的功能。

结论

在 Typescript 中，我们可以使用 keyCode 属性来获取用户按下的键的数字值，从而实现不同的功能。但是需要注意的是，不同的浏览器可能会有不同的键码值，所以我们需要根据实际情况来进行调整。