Element: keypress 事件

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

addEventListener("keypress", (event) => { })

onkeypress = (event) => { }

事件型別

一個 KeyboardEvent。繼承自 UIEvent 和 Event。

事件屬性

此介面還繼承其父級 UIEvent 和 Event 的屬性。

KeyboardEvent.altKey 只讀

返回一個布林值，如果生成按鍵事件時 Alt 鍵（macOS 上為 Option 或 ⌥ 鍵）處於活動狀態，則返回 true。

KeyboardEvent.code 只讀

返回一個字串，其中包含事件所代表的物理鍵的程式碼值。

KeyboardEvent.ctrlKey 只讀

返回一個布林值，如果生成按鍵事件時 Ctrl 鍵處於活動狀態，則返回 true。

KeyboardEvent.isComposing 只讀

返回一個布林值，如果事件在 compositionstart 之後和 compositionend 之前觸發，則返回 true。

KeyboardEvent.key 只讀

返回一個字串，表示事件所代表的鍵的鍵值。

KeyboardEvent.location 只讀

返回一個數字，表示鍵盤或其他輸入裝置上按鍵的位置。標識位置的常量列表顯示在鍵盤位置中。

KeyboardEvent.metaKey 只讀

返回一個布林值，如果生成按鍵事件時 Meta 鍵（Mac 鍵盤上的 ⌘ Command 鍵；Windows 鍵盤上的 Windows 鍵 (⊞)）處於活動狀態，則返回 true。

KeyboardEvent.repeat 只讀

返回一個布林值，如果按鍵被按住並自動重複，則返回 true。

KeyboardEvent.shiftKey 只讀

返回一個布林值，如果生成按鍵事件時 Shift 鍵處於活動狀態，則返回 true。

示例

addEventListener keypress 示例

此示例會在您聚焦 <input> 元素後按下任意鍵時，記錄 KeyboardEvent.code 的值。

要檢視哪些鍵會觸發 keypress 事件，哪些鍵不會，請嘗試按下以下鍵：

• 字母鍵、數字鍵和標點符號鍵
• 符號鍵，例如 $、+、=、% 和 + 鍵
• 修飾鍵，例如 Alt、Shift、Ctrl、Meta、Esc、Option 或 ⌘ 鍵
• Enter 鍵
• Enter 鍵與 Shift 鍵或 Ctrl 鍵組合按下
• Enter 鍵與 Shift 鍵或 Ctrl 鍵之外的其他修飾鍵組合按下

<div>
  <label for="sample">Focus the input and type something:</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>

const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

onkeypress 等效

input.onkeypress = logKey;

規範

瀏覽器相容性

另見

• 事件也以其為目標的 Document 介面。
• 相關事件
  • input
  • keydown
  • keyup