HTML DOM KeyboardEvent 对象

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>