Utilizza l'API Keyboard Lock per acquisire il tasto Esc in modalità a schermo intero.
Se ti è capitato di usare un gioco web a schermo intero da cui è stata visualizzata una finestra di dialogo in-game che hai istintivamente annullato con il tasto Esc, probabilmente sei stato espulso dalla modalità a schermo intero. Questa esperienza frustrante è causata dal fatto che la finestra di dialogo e la modalità a schermo intero "si scontrano" per il tasto Esc. È una battaglia impari perché, per impostazione predefinita, vinca sempre la modalità a schermo intero. Ma come fare per rendere la finestra di dialogo migliore per il tasto Esc? È qui che entra in gioco l'API Keyboard Lock.
Supporto del browser
Utilizzo dell'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 è stato 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, usa l'API Keyboard Lock come miglioramento progressivo acquisendo il tasto Esc quando richiedi lo schermo intero. Sblocca
(ovvero, non acquisire più) la tastiera quando esci dalla modalità a schermo intero tramite il
metodo unlock()
dell'interfaccia di 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, premendo Esc puoi annullare la finestra di dialogo per impostazione predefinita. Se l'utente preme e tiene premuto il tasto Esc, può comunque uscire dalla modalità a schermo intero. Il meglio delle due piattaforme.
Demo
Puoi testare sia la variante predefinita sia quella avanzata progressivamente nella demo. Il codice sorgente della demo è meno chiaro rispetto allo snippet riportato sopra, perché deve mostrare entrambi i comportamenti.
In pratica
Per utilizzare nella pratica questo miglioramento progressivo, copia lo snippet qui sopra. È progettato per funzionare senza dover apportare modifiche, anche con il codice a schermo intero esistente. Vediamo ad esempio questo PR per il gioco Freeciv. Dopo aver unito le PR, puoi annullare tutte le finestre di dialogo in-game premendo Esc.
Un segnalibro aggiuntivo
Non tutte le app o i giochi che supportano la modalità a schermo intero saranno open source o accettano le patch. Puoi aggiungere il seguente bookmarklet alla barra dei Preferiti e fare clic per attivare una modalità a schermo intero migliore.