keydown 与 keyup

顾名思义，当一个按键被按下时会触发 keydown 事件，当按键被抬起时会触发 keyup 事件。

event.code 与 event.key

event.code 表明了当前哪个按键被按下。event.key 表明了输入的字符。如果要区分大小写，使用 event.key 则更加方便。

$$warning

当使用输入法进行中文之类的输入时， event.key 则无法获取按下的键。

$$

$$demo

<input id="input" type="text" placeholder="输入测试一下" /> <textarea id="out" rows="10"></textarea> <script> input.onkeydown = function (event) { out.textContent += event.code：${event.code}\tevent.key：${event.key}\n out.scrollTop = out.scrollHeight } </script> <style> #input { margin-bottom: 20px;

    padding: 10px;

    width: 100%;
}

#out {
    width: 100%;
}

</style>

$$

$$warning

过去有一个 keypress 事件，还有事件对象的 keyCode、charCode 和 which 属性。

大多数浏览器对它们都存在兼容性问题，以致使该规范的开发者不得不弃用它们并创建新的现代的事件（本文上面所讲的这些事件），除此之外别无选择。旧的代码仍然有效，因为浏览器还在支持它们，但现在完全没必要再使用它们。

keypress 已经在 MDN 中明确为废除状态，切记不要再使用。 $$