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 qui affichait une boîte de dialogue dans le jeu que vous avez instinctivement annulée à l'aide de la touche Échap, vous avez probablement quitté le mode plein écran. Cette expérience frustrante est due au fait que la boîte de dialogue et le mode plein écran se disputent la touche Échap. La bataille est inégale car, par défaut, le mode plein écran l'emporte toujours. Mais comment faire pour que la boîte de dialogue soit la solution gagnante pour la touche Échap ? C'est là que l'API Keyboard Lock entre en jeu.
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 autorisé par le système d'exploitation sous-jacent. Heureusement, la touche Échap en fait partie.
Si votre application est en mode plein écran, utilisez l'API Keyboard Lock comme amélioration progressive en capturant la touche Échap lorsque vous demandez le mode plein écran. Déverrouillez le clavier (c'est-à-dire, ne le capturez plus) lorsque vous quittez le mode plein écran via 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 les variantes par défaut et progressivement améliorées dans la démonstration. Le code source de la démonstration est moins propre que l'extrait ci-dessus, car il doit présenter les deux comportements.
En pratique
Pour utiliser cette amélioration progressive dans la pratique, il vous suffit de copier l'extrait ci-dessus. Il est conçu pour fonctionner sans aucune modification, même avec du code plein écran existant. À titre d'exemple, consultez cette liste des relations publiques pour le jeu Freeciv. Une fois le PR fusionné, vous pouvez annuler toutes les boîtes de dialogue intégrées au jeu en appuyant sur Échap.
Un favori intelligent bonus
Les applications et les jeux compatibles avec le mode plein écran ne seront pas tous Open Source ou n'accepteront pas tous vos correctifs. Vous pouvez ajouter le favori suivant à votre barre de favoris et cliquer dessus pour activer un meilleur mode plein écran.