📌  相关文章
📜  HTML | onkeydown 事件属性(1)

📅  最后修改于: 2023-12-03 15:01:14.508000             🧑  作者: Mango

HTML | onkeydown 事件属性

在 HTML 中，onkeydown 是一个事件属性，用于指定在按下键盘上的键时触发的 JavaScript 代码。它可以用于对用户的键盘输入做出响应，实现交互功能和用户体验的改进。

使用方法

onkeydown 事件属性可以直接添加到 HTML 元素上，也可以通过 JavaScript 动态添加或删除。以下是使用方法的几个示例：

直接添加到 HTML 元素上
<input type="text" onkeydown="myFunction(event)">
使用 JavaScript 动态添加
document.getElementById("myInput").onkeydown = function(event) {
    myFunction(event);
};
使用 addEventListener() 方法
document.getElementById("myInput").addEventListener("keydown", myFunction);
事件参数

onkeydown 事件触发时，会传递一个事件参数给对应的 JavaScript 函数。可以通过这个参数获取按下的键信息以及相关操作。以下是事件参数的一些常用属性和方法：

  • event.keyCode：按下的键的 Unicode 编码值
  • event.key：按下的键的字符串表示
  • event.shiftKey：按下 Shift 键时返回 true，否则返回 false
  • event.ctrlKey：按下 Ctrl 键时返回 true，否则返回 false
  • event.altKey：按下 Alt 键时返回 true，否则返回 false
  • event.preventDefault()：阻止默认的键盘事件行为
示例

以下示例展示了如何使用 onkeydown 事件属性响应用户的键盘输入，并根据不同的按键执行相应的代码：

<!DOCTYPE html>
<html>
<head>
    <title>onkeydown 事件示例</title>
</head>
<body>
    <input id="myInput" type="text" onkeydown="myFunction(event)">
    <script>
        function myFunction(event) {
            if (event.keyCode === 13) {
                alert("Enter 键被按下");
            } else if (event.keyCode === 27) {
                alert("Esc 键被按下");
            }
        }
    </script>
</body>
</html>

上述示例中，当用户在输入框中按下 Enter 键时，会弹出一个提示框显示 "Enter 键被按下"；当用户按下 Esc 键时，会弹出一个提示框显示 "Esc 键被按下"。

结论

onkeydown 事件属性是 HTML 中用于响应用户键盘输入的重要工具，通过使用它可以实现各种用户交互和键盘快捷键的功能。熟练掌握 onkeydown 的用法以及相关的事件参数，能够提升开发者的编程能力并提供更良好的用户体验。