Улучшенный полноэкранный режим с API блокировки клавиатуры.

Используйте API блокировки клавиатуры, чтобы захватить клавишу Escape в полноэкранном режиме.

Thomas Steiner

Если вы когда-либо играли в полноэкранную веб-игру, в которой появлялось внутриигровое диалоговое окно, которое вы инстинктивно закрывали с помощью клавиши Escape , вас, вероятно, выгнали из полноэкранного режима. Этот неприятный опыт вызван тем, что диалоговый и полноэкранный режимы «борются» за клавишу Escape . Это неравная битва, потому что по умолчанию всегда побеждает полноэкранный режим. Но как сделать диалог победителем по клавише Escape ? Здесь в игру вступает API блокировки клавиатуры .

Поддержка браузера

Использование API блокировки клавиатуры

API блокировки клавиатуры доступен на navigator.keyboard. Метод lock() интерфейса Keyboard возвращает обещание после включения захвата нажатий любой или всех клавиш на физической клавиатуре. Этот метод может захватывать только те ключи, к которым предоставлен доступ базовой операционной системой. К счастью, клавиша Escape — одна из них.

Если ваше приложение имеет полноэкранный режим, используйте API блокировки клавиатуры в качестве постепенного улучшения, захватывая клавишу Escape при запросе полноэкранного режима. Разблокируйте (то есть больше не захватывайте) клавиатуру при выходе из полноэкранного режима с помощью метода unlock() интерфейса 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.');
  });
}

Это означает, что когда пользователь находится в полноэкранном режиме, нажатие Escape отменяет диалоговое окно по умолчанию. Если пользователь нажмет и удержит клавишу Escape , он все равно сможет выйти из полноэкранного режима. Лучшее из обоих миров.

Демо

В демо-версии вы можете протестировать как стандартный, так и постепенно улучшенный варианты. Исходный код демо-версии менее чист, чем приведенный выше фрагмент, поскольку он должен демонстрировать оба поведения.

На практике

Чтобы использовать это прогрессивное улучшение на практике, просто скопируйте приведенный выше фрагмент. Он разработан для работы без каких-либо необходимых изменений даже с существующим полноэкранным кодом. В качестве примера смотрите этот пиар для игры Freeciv . После объединения PR вы можете отменить все внутриигровые диалоги, нажав Escape .

Бонусный букмарклет

Не все приложения и игры, поддерживающие полноэкранный режим, будут иметь открытый исходный код или принимать ваши исправления. Следующий букмарклет можно добавить на панель закладок и щелкнуть по нему, чтобы включить улучшенный полноэкранный режим.