為互動式網站、遊戲、遠端桌面或應用程式串流等各種用途，提供沉浸式的全螢幕體驗。
隨著越來越多使用瀏覽器使用時間的使用者越來越多，互動性高的網站、遊戲、遠端桌面串流和應用程式串流服務都是為了提供沉浸式的全螢幕體驗。為達成這個目的，網站必須在全螢幕模式下存取特殊按鍵和鍵盤快速鍵，以便用於瀏覽、選單或玩遊戲。一些可能需要的按鍵範例包括 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() 方法會在啟用實體鍵盤上任何或所有按鍵的擷取功能後，傳回 Proto。此方法只能擷取由基礎作業系統授予的金鑰。lock() 方法需要一或多個按鍵代碼的陣列進行鎖定。如未提供按鍵碼，系統將鎖定所有金鑰。如需有效鍵碼值的清單，請參閱 UI 事件 KeyboardEvent code Value 規格。
擷取所有金鑰
以下範例會擷取所有按鍵動作。
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 的一個問題是，此 API 可用來擷取所有金鑰，且與 Fullscreen API 和 PointerLock API 搭配使用，導致使用者無法離開網頁。為了避免這個問題，即使 API 要求所有金鑰，瀏覽器也必須讓使用者能夠退出鍵盤鎖定功能。使用 Chrome 時，如果用防門 1 變長 (兩秒) Esc Esc 鍵即可離開鍵盤鎖定。
實用連結
特別銘謝
本文由 Joe Medley 和 Kayce Basques 審查。鍵盤鎖規格是由 Gary Kacmarcik 和 Jamie Walch 編寫。 主頁橫幅由 Ken Suarez 在 Unsplash 上提供。