Amélioration du mode plein écran avec l'API Keyboard Lock

Utilisez l'API Keyboard Lock pour capturer la touche Échap en mode plein écran.

Thomas Steiner

Si vous avez déjà joué à un jeu Web en plein écran et qu'une boîte de dialogue s'est affichée, que vous avez instinctivement fermée avec la touche Échap, vous avez probablement été redirigé hors du mode plein écran. Cette expérience frustrante est due au fait que le mode boîte de dialogue et le mode plein écran "se disputent" la touche Échap. Il s'agit d'une bataille inégale, car par défaut, le mode plein écran gagne toujours. Mais comment faire en sorte que la boîte de dialogue soit la gagnante 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 frappes sur tout ou partie des touches du clavier physique. Cette méthode ne peut capturer que les clés auxquelles le système d'exploitation sous-jacent a accordé l'accès. Heureusement, la touche Échap en fait partie.

Si votre application dispose d'un mode plein écran, utilisez l'API Keyboard Lock comme amélioration progressive en capturant la touche Échap lorsque vous demandez le plein écran. Déverrouillez (c'est-à-dire, 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émo

Vous pouvez tester les variantes par défaut et améliorées progressivement dans la démonstration. Le code source de la démo 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 requise, même avec le code plein écran existant. Pour obtenir un exemple, consultez cette demande d'extraction pour le jeu Freeciv. Une fois la demande de pull fusionnée, vous pouvez annuler toutes les boîtes de dialogue du jeu en appuyant sur Échap.

Un favori intelligent bonus

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 bookmarklet suivant à votre barre de favoris et cliquer dessus pour activer un meilleur mode plein écran.