参考资料

1. HTML DOM 返回文档中表单数目
2. HTML DOM为表格指定规则
3. HTML DOM 返回图像映射的某个区域的href 实例
4. HTML DOM 设置image的hspace和vspace属性
5. HTML DOM添加表格中的行
6. HTML DOM改变表格边框的宽度
7. HTML DOM 返回一个表单target属性的值
8. HTML DOM 返回和设置一个iframe中的scrolling属性的值

HTML DOM 键盘事件 keyCode

介绍

keyCode 是键盘事件的属性，表示用户按下的键盘键的数字代码。虽然现在已被 key 属性取代，但在一些旧代码中仍能看到。

相关事件

• onkeydown - 按键按下时触发

• onkeyup - 按键释放时触发

用法

element.onkeydown = function(event) {
    var keyCode = event.keyCode;
    // 处理按键代码
};

实例

<input type="text" id="myInput">

<script>
document.getElementById("myInput").onkeydown = function(event) {
    console.log("按下的键码是: " + event.keyCode);
    if(event.keyCode === 13) { // 回车键
        alert("你按下了回车键");
    }
};
</script>

常见键码

• 8: Backspace

• 9: Tab

• 13: Enter

• 16: Shift

• 17: Ctrl

• 18: Alt

• 27: Esc

• 32: 空格

• 37: 左箭头

• 38: 上箭头

• 39: 右箭头

• 40: 下箭头

CSS 扩展

虽然 keyCode 本身与 CSS 无关，但可以通过 JavaScript 根据按键修改样式：

document.onkeydown = function(e) {
    if(e.keyCode === 32) { // 空格键
        document.body.style.backgroundColor = "lightblue";
    }
};

替代方案

现代推荐使用 event.key 替代 keyCode，因为它返回的是字符串形式的键名，更易读：

element.onkeydown = function(event) {
    console.log("按下的键是: " + event.key);
};