為各種用途提供身歷式全螢幕體驗，包括互動式網站、遊戲、遠端桌面或應用程式串流。
由於越來越多使用者將大部分時間花在瀏覽器上，因此互動性豐富的網站、遊戲、遠端桌面串流和應用程式串流，都致力於提供沉浸式全螢幕體驗。為達成這項目標，網站必須在全螢幕模式下存取特殊鍵和鍵盤快速鍵，才能用於導覽、選單或遊戲。可能需要按下的一些鍵包括 Esc、Alt + Tab、Cmd + ` 和 Ctrl + N。
根據預設，這些鍵會由瀏覽器或基礎作業系統擷取，因此無法供網頁應用程式使用。Keyboard Lock API 可讓網站使用主機作業系統允許的所有可用鍵 (請參閱「瀏覽器相容性」)。
使用 Keyboard Lock API
Keyboard API 的 Keyboard 介面提供可切換實體鍵盤按鍵擷取功能，以及取得使用者鍵盤配置相關資訊的函式。
修課條件
在現代瀏覽器中，有兩種全螢幕模式可供使用：透過 Fullscreen API 由 JavaScript 啟動的模式，以及由使用者透過鍵盤快速鍵啟動的模式。只有在 JavaScript 啟動的全螢幕模式處於啟用狀態時，才能使用 Keyboard Lock API。以下是 JavaScript 啟動的全螢幕範例：
await document.documentElement.requestFullscreen();
特徵偵測
您可以使用下列模式，檢查是否支援 Keyboard Lock API：
if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
// Supported!
}
鎖定鍵盤
Keyboard 介面的 lock() 方法會在啟用實體鍵盤上任何或所有按鍵的按鍵動作擷取功能後，傳回承諾。這個方法只能擷取由底層作業系統授予存取權的金鑰。lock() 方法會使用一或多個鎖定鍵碼的陣列。如果未提供密碼，所有鍵都會上鎖。您可以在 UI 事件 KeyboardEvent 代碼值規格中，查看有效鍵碼值的清單。
擷取所有鍵
以下範例會擷取所有按鍵動作。
navigator.keyboard.lock();
擷取特定按鍵
以下範例會擷取 W、A、S 和 D 鍵。無論按下按鍵時使用哪些修飾符，系統都會擷取這些按鍵。假設使用美國 QWERTY 鍵盤，註冊 "KeyW" 可確保 W、Shift + W、Control + W、Control + Shift + W 和所有其他含有 W 的按鍵輔助鍵組合會傳送至應用程式。"KeyA"、"KeyS" 和 "KeyD" 也適用相同的做法。
await navigator.keyboard.lock([
"KeyW",
"KeyA",
"KeyS",
"KeyD",
]);
您可以使用鍵盤事件回應擷取的按鍵按下事件。例如，以下程式碼會使用 onkeydown 事件：
document.addEventListener('keydown', (event) => {
if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
// Do something when the 'A' key was pressed, but only
// when not in combination with the command or control key.
}
});
解鎖鍵盤
unlock() 方法會解鎖 lock() 方法擷取的所有鍵，並以同步方式傳回。
navigator.keyboard.unlock();
關閉文件時，瀏覽器一律會隱含呼叫 unlock()。
示範
您可以在 Glitch 上執行示範，測試 Keyboard Lock API。請務必查看原始碼。按一下下方的「進入全螢幕」按鈕，即可在新視窗中啟動示範，讓示範進入全螢幕模式。
安全性考量
這個 API 的一個疑慮是，它可以用來擷取所有按鍵，並且 (搭配 Fullscreen API 和 PointerLock API) 防止使用者離開網頁。為避免這種情況發生，規格要求瀏覽器必須提供一種方法，讓使用者可在 API 要求所有鍵時，退出鍵盤鎖定狀態。在 Chrome 中，這個逃生路徑是長按 (兩秒) Esc 鍵，即可觸發鍵盤鎖定功能。
實用連結
特別銘謝
本文由 Joe Medley 和 Kayce Basques 審查。鍵盤鎖定功能規格是由 Gary Kacmarcik 和 Jamie Walch 撰寫。主頁橫幅圖片由 Ken Suarez 提供，取自 Unsplash。