為各種用途 (包括互動式網站、遊戲、遠端桌面或應用程式串流) 提供沉浸式的全螢幕體驗。
越來越多使用者在瀏覽器中花最多時間使用瀏覽器,因此擁有豐富的互動式網站、遊戲、遠端桌面串流和應用程式串流功能,則致力提供沉浸式的全螢幕體驗。為了達成這個目的,網站在全螢幕模式下需要存取特殊按鍵和鍵盤快速鍵,這樣才能用於瀏覽、選單或玩遊戲。常見的按鍵包括 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 code 值規格提供了有效的按鍵碼值清單。
擷取所有鍵
以下範例會擷取所有按鍵操作,
navigator.keyboard.lock();
擷取特定鍵
以下範例會擷取 W、A、S 和 D 鍵。無論按鍵搭配使用哪些輔助鍵,系統都會擷取這些按鍵。假設使用美國 QWERTY 鍵盤配置,註冊 "KeyW"
可確保 W、Shift + W、Control + W、Control + Shift + 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。