📌  相关文章
📜  html onkeypress - Html (1)

📅  最后修改于: 2023-12-03 14:41:46.788000             🧑  作者: Mango

HTML onkeypress - 理解和使用

在HTML中，onkeypress是一个事件属性，用于指定在用户按下键盘上的键时执行的JavaScript函数。它可以应用于任何具有焦点的HTML元素，例如输入框、下拉框和按钮等。

语法格式

onkeypress属性的语法是:

<element onkeypress="myFunction()">

其中，myFunction()是要在键按下时执行的函数。

事件对象

在调用onkeypress事件的函数时，JavaScript会自动生成一个事件对象，其中包含关于按键事件的信息，例如哪个键被按下、Ctrl、Shift或Alt是否按下等。这个事件对象可以通过函数的参数传递给函数。

function myFunction(event) {
   var x = event.key;
   document.getElementById("demo").innerHTML = "按下的键是：" + x;
}
示例

下面是一个使用onkeypress事件的示例，在输入框中按下键时将触发一个函数，并将输入框的值添加到一个列表中的示例。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput" onkeypress="addToList(event)">
<ul id="myList"></ul>

<script>
function addToList(event) {
  var input = document.getElementById("myInput");
  var ul = document.getElementById("myList");
  if (event.keyCode === 13) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
  }
}
</script>

</body>
</html>
总结

onkeypress事件是在HTML中处理按键事件的常用方法。它提供了一个简单的方式来跟踪用户按下了哪个键，以及在某些情况下对按键事件做出响应。应用它将使您的HTML页面更加动态和用户友好。