Захват ключей с помощью API блокировки клавиатуры

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

Томас Штайнер

Поскольку все больше пользователей проводят большую часть времени в браузере, интерактивные веб-сайты, игры, удаленная потоковая передача рабочего стола и потоковая передача приложений стремятся обеспечить захватывающий полноэкранный опыт. Для этого сайтам необходим доступ к специальным клавишам и сочетаниям клавиш в полноэкранном режиме, чтобы их можно было использовать для навигации, меню или игр. Примерами необходимых клавиш могут быть Esc , Alt + Tab , Cmd + ` и Ctrl + N.

По умолчанию эти клавиши недоступны веб-приложению, поскольку они перехватываются браузером или базовой операционной системой. API Keyboard Lock позволяет веб-сайтам использовать все доступные клавиши, разрешенные хостовой ОС (см. Совместимость с браузерами ).

Трансляция изображения с Ubuntu Linux в вкладку браузера Chrome в macOS (пока не работает в полноэкранном режиме).
Проблема: потоковая передача удаленного рабочего стола Ubuntu Linux не работает в полноэкранном режиме и без активной блокировки клавиатуры, поэтому системные клавиши по-прежнему перехватываются хост-операционной системой macOS, и эффект погружения пока отсутствует .

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

Keyboard Keyboard API предоставляет функции, позволяющие переключать захват нажатий клавиш с физической клавиатуры, а также получать информацию о раскладке клавиатуры пользователя.

Предварительное условие

В современных браузерах доступны два типа полноэкранного режима: инициируемый JavaScript через API Fullscreen и инициируемый пользователем с помощью сочетания клавиш. API Keyboard Lock доступен только при активном полноэкранном режиме, инициируемом JavaScript . Вот пример полноэкранного режима, инициируемого JavaScript:

await document.documentElement.requestFullscreen();

Обнаружение признаков

Для проверки поддержки API блокировки клавиатуры можно использовать следующий шаблон:

if ('keyboard' in navigator && 'lock' in navigator.keyboard) {
  // Supported!
}

Блокировка клавиатуры

Метод lock() интерфейса Keyboard возвращает промис после включения возможности перехвата нажатий клавиш для любой или всех клавиш физической клавиатуры. Этот метод может перехватывать только те клавиши, к которым разрешён доступ операционной системой. Метод lock() принимает массив из одного или нескольких кодов клавиш для блокировки. Если коды клавиш не указаны, будут заблокированы все клавиши. Список допустимых значений кодов клавиш доступен в спецификации значений кода KeyboardEvent для событий пользовательского интерфейса .

Захват всех ключей

В следующем примере отображаются все нажатия клавиш.

navigator.keyboard.lock();

Захват определенных клавиш

В следующем примере перехватываются нажатия клавиш W , A , S и D. Перехват этих клавиш происходит независимо от того, какие модификаторы используются при нажатии клавиши. При условии американской раскладки QWERTY регистрация "KeyW" гарантирует, что в приложение будут отправлены комбинации клавиш W , Shift + W , Control + W , Control + Shift + W и все остальные комбинации с клавишей W. То же самое относится к "KeyA" , "KeyS" и "KeyD" .

await navigator.keyboard.lock([
  "KeyW",
  "KeyA",
  "KeyS",
  "KeyD",
]);

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

document.addEventListener('keydown', (event) => {
  if ((event.code === 'KeyA') && !(event.ctrlKey || event.metaKey)) {
    // Do something when the 'A' key was pressed, but only
    // when not in combination with the command or control key.
  }
});

Разблокировка клавиатуры

Метод unlock() разблокирует все ключи, захваченные методом lock() , и возвращает управление синхронно.

navigator.keyboard.unlock();

При закрытии документа браузер всегда неявно вызывает unlock() .

Демо

Вы можете протестировать API блокировки клавиатуры, запустив эту демонстрацию . Обязательно ознакомьтесь с исходным кодом . Нажатие кнопки «Вход в полноэкранный режим» ниже запустит демонстрацию в новом окне, чтобы она могла перейти в полноэкранный режим.

Вопросы безопасности

Одна из проблем этого API заключается в том, что его можно использовать для перехвата всех нажатий клавиш и (в сочетании с API полноэкранного режима и API PointerLock ) для предотвращения выхода пользователя с веб-страницы. Чтобы предотвратить это, спецификация требует, чтобы браузер предоставлял пользователю способ выхода из режима блокировки клавиатуры, даже если API запрашивает все нажатия клавиш. В Chrome таким способом является длительное (двухсекундное) нажатие клавиши Esc для выхода из режима блокировки клавиатуры.

Благодарности

Данная статья была проверена Джо Медли и Кейси Баскесом . Спецификация Keyboard Lock разработана Гэри Качмарчиком и Джейми Уолчем .