Utilisez l'API Keyboard Lock pour capturer la touche Échap en mode plein écran.
Si vous avez déjà joué à un jeu Web en plein écran pour afficher une boîte de dialogue dans le jeu que vous avez annulée instinctivement avec la touche Échap, vous vous êtes probablement retrouvé exclu du mode plein écran. Cette expérience frustrante est due au fait que les boîtes de dialogue et le mode plein écran se battent pour la touche Échap. C'est une bataille inégale car, par défaut, le mode plein écran l'emporte toujours. Mais comment faire en sorte que la boîte de dialogue la remporte pour la touche Échap ? C'est là qu'intervient l'API Keyboard Lock.
Prise en charge des navigateurs
Utiliser l'API Keyboard Lock
L'API Keyboard Lock est disponible sur navigator.keyboard.. La méthode lock() de l'interface Keyboard renvoie une promesse après avoir activé la capture des pressions sur les touches du clavier physique. Cette méthode ne peut capturer que les clés auxquelles l'accès est accordé par le système d'exploitation sous-jacent. Heureusement, la touche Échap en fait partie.
Si votre application dispose d'un mode plein écran, utilisez l'API Keyboard Lock pour l'améliorer progressivement en capturant la touche Échap lorsque vous demandez le plein écran. Déverrouillez (c'est-à-dire que vous ne capturez plus) le clavier lorsque vous quittez le mode plein écran à l'aide de la méthode unlock() de l'interface 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.');
});
}
Cela signifie que lorsque l'utilisateur est en mode plein écran, appuyer sur Échap annule la boîte de dialogue par défaut. Si l'utilisateur appuie de manière prolongée sur la touche Échap, il peut toujours quitter le mode plein écran. Le meilleur des deux mondes.
Démonstration
Vous pouvez tester à la fois les variantes par défaut et les variantes progressivement améliorées dans la démonstration. Le code source de la démonstration est moins propre que l'extrait précédent, car il doit montrer les deux comportements.
En pratique
Pour utiliser cette amélioration progressive dans la pratique, il vous suffit de copier l'extrait précédent. Il est conçu pour fonctionner sans modification, même avec du code plein écran existant. À titre d'exemple, consultez cette RP pour le jeu Freeciv. Une fois la demande de retrait fusionnée, vous pouvez annuler toutes les boîtes de dialogue du jeu en appuyant sur Échap.
Un favori intelligent en plus
Toutes les applications ou tous les jeux compatibles avec le mode plein écran ne seront pas Open Source ni n'accepteront vos correctifs. Vous pouvez ajouter le favori suivant à votre barre de favoris et cliquer dessus pour activer le mode plein écran amélioré.