Улучшенный полноэкранный режим с 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 , он всё равно сможет выйти из полноэкранного режима. Это лучшее из обоих миров.

Демо

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

На практике

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

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

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