keyCode, key and pressing Enter

• JavaScript

在之前的 JavaScript 代码中，经常通过 keyCode 这个 keydown 事件中的属性，来判断当前用户按下的键是哪一个。然而，这个属性已经被废弃，不再被建议使用了（见 MDN）。取而代之的，是使用 key 或者 code 这类属性来进行类似的判断。

如果原先有如下的代码来判断用户是否按下了回车（Enter）键：

dom.addEventListener('keydown', (event) => {
  if (event.keyCode === 13 /* enter */) {
    // do something
  }
});

那么，现在使用 key 属性，可以将代码改写为：

dom.addEventListener('keydown', (event) => {
  if (!event.isComposing && event.key === 'enter') {
    // do something
  }
});

几点说明：

  1. key 属性表示当前用户按下的键是哪一个，因此可以通过 'Enter' 来判断按下的是否是回车键，更多介绍可以参考 MDN；
  2. 在用 keyCode 的时候，不是所有按回车的情况都会得到 13：如果当前正在进行输入法的输入（composing），那么按回车得到的值是 229。这里，229 专门用来表示当前的按键操作由 IME（输入法）处理，等价于事件中的 isComposing 属性。相关的介绍可以参考 MDN；

注：这也是从 keyCode 转换到 key 属性使用时，非常容易遇到的问题。在使用 keyCode 的时候，由于输入法输入时的 keyCode 是 229 而不是 13，因此并不会走到 if (keyCode === 13) 的逻辑里面去；但是 key 的属性会忠实于用户的输入，无论是否是输入法状态都会返回 'Enter'，如果有需求在输入法状态下按回车不响应事件，就需要额外判断一下。

  1. isComposing 属性可以用于判断当前是否正在进行输入法输入，也就是在 compositionstart 与 compositionend 事件的中间状态，见 MDN。注：isComposing 这个属性 IE 并不支持，可以通过 compositionstart 和 compositionend 来手动获得该状态。