Usa l'API Keyboard Lock per acquisire il tasto Esc in modalità a schermo intero.
Se ti è mai capitato di giocare a un web game a schermo intero da cui è stata visualizzata una finestra di dialogo in-game che hai istintivamente annullato con il tasto Esc, probabilmente ti sei capitato di essere uscito dalla modalità a schermo intero. Questa esperienza frustrante è causata dal fatto che la finestra di dialogo e la modalità a schermo intero "combattono" per il tasto Esc. È una battaglia impari perché, per impostazione predefinita, vince sempre la modalità a schermo intero. Ma come puoi rendere la finestra di dialogo la migliore per il tasto Esc? È qui che entra in gioco l'API Keyboard Lock.
Supporto del browser
Utilizzare l'API Keyboard Lock
L'API Keyboard Lock è disponibile su navigator.keyboard. Il metodo lock() dell'interfaccia Keyboard restituisce una promessa dopo aver abilitato l'acquisizione della pressione dei tasti per uno o tutti i tasti della tastiera fisica. Questo metodo può acquisire solo le chiavi a cui viene concesso l'accesso dal sistema operativo sottostante. Fortunatamente, il tasto Esc è
uno di questi.
Se la tua app dispone di una modalità a schermo intero, utilizza l'API Keyboard Lock come miglioramento progressivo acquisendo il tasto Esc quando richiedi la modalità a schermo intero. Sblocca
(ovvero non acquisisci più) la tastiera quando esci dalla modalità a schermo intero utilizzando il
metodo unlock()
dell'interfaccia Keyboard.
// Feature detection.
const supportsKeyboardLock =
('keyboard' in navigator) && ('lock' in navigator.keyboard);
if (supportsKeyboardLock) {
document.addEventListener('fullscreenchange', async () => {
if (document.fullscreenElement) {
// The magic happens here… 🦄
await navigator.keyboard.lock(['Escape']);
console.log('Keyboard locked.');
return;
}
navigator.keyboard.unlock();
console.log('Keyboard unlocked.');
});
}
Ciò significa che quando l'utente è in modalità a schermo intero, la pressione del tasto Esc annulla la finestra di dialogo per impostazione predefinita. Se l'utente tiene premuto e tieni premuto il tasto Esc, può comunque uscire dalla modalità a schermo intero. Il meglio delle due modalità.
Demo
Puoi testare sia la variante predefinita che quella progressivamente avanzata nella demo. Il codice sorgente della demo è meno chiaro dello snippet precedente, perché deve mostrare entrambi i comportamenti.
In pratica
Per applicare nella pratica questo miglioramento progressivo, basta copiare lo snippet precedente. È progettata per funzionare senza modifiche, anche con il codice a schermo intero esistente. Ad esempio, guarda questo PR per il gioco Freeciv. Dopo aver unito i PR, puoi annullare tutte le finestre di dialogo in-game premendo Esc.
Un bookmarklet bonus
Non tutte le app o tutti i giochi che supportano la modalità a schermo intero saranno open source o accettano le tue patch. Puoi aggiungere il seguente bookmarklet alla barra dei preferiti e fare clic su per abilitare una migliore modalità a schermo intero.