HTML DOM KeyboardEvent 对象

htmlweb developmentfront end technology更新于 2025/6/22 23:40:17

HTML DOM KeyboardEvent 对象表示用户按下键盘上的某个按键时发生的事件。

属性

此处，"KeyboardEvent" 可以具有以下属性和方法 −

属性/方法	描述
altKey	它返回"ALT"键是否被按下。	返回该键是否被按下
charCode	返回该键的 Unicode 字符代码
code	返回该键的代码
ctrlKey	返回"CTRL"键是否被按下。键是否被按下
getModifierState()	如果指定的键被激活，则返回 true，否则返回 false
isComposing	返回事件的状态是否为撰写
key	返回事件所代表的键的键值
keyCode	返回触发事件的键的 Unicode 字符代码
location	返回键盘或设备上键的位置
metaKey	返回"meta"是否被按下。触发按键事件时是否按下了该键
repeat	返回某个键是否被重复按下
shiftKey	返回"SHIFT"键是否被按下。触发按键事件时，按下了哪个键
which	返回触发事件的按键的 Unicode 字符代码

事件

以下是作用于 keyboardEvent 对象的事件 −

事件	描述
onkeydown	用户按下按键时发生事件
onkeypress	用户按下某个键时发生该事件
onkeyup	用户释放某个键时发生该事件

示例

让我们看一个 key 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent key</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-key</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Ball" onkeypress="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.key === 'B')
         divDisplay.textContent = 'Correct Answer';
      else if(InputEvent.key === 'b')
         divDisplay.textContent = 'Close call, you might have caps lock turned off';
      else
         divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
      textSelect.textContent = '';
   }
</script>
</body>
</html>