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>