参考资料

1. HTML DOM 返回图像映射的某个区域的hostname实例
2. HTML DOM在下拉列表中选择多个选项
3. HTML DOM 返回一个区域的href属性的querystring部分 实例
4. HTML DOM为表格指定规则
5. HTML DOM 节点列表长度
6. HTML DOM 当点击完button不可用 实例
7. HTML DOM 返回和设置链接的hreflang属性实例
8. HTML DOM 返回文档中的链接数

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);
};

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。