Better full screen mode with the Keyboard Lock API



Томас Штайнер делится хорошим примером, когда можно сделать пользовательский опыт лучше очень коротким сниппетом кода. Представьте, что вы открылы браузер в fullscreen-режиме, открыли модалку на сайте, пытаетесь её закрыть при помощи Esc — что произойдёт? Правильно, браузер выйдет из fullscreen-режима, потому что в ОС по умолчанию так сделано. Я на macOS постоянно из-за этого страдаю.



Так вот, есть Keyboard Lock API, который позволяет заблокировать какие-то кнопки или вообще все. В случае с Escape нужно будет не нажать кнопку, а зажать, чтобы выйти из fullscreen-режима.





// блокируем

await navigator.keyboard.lock(['Escape']);

// разблокируем

navigator.keyboard.unlock();





Я периодически пользуюсь веб-приложениями, которые для моего лучшего пользовательского опыта на любое нажатие клавиши на клавиатуре пытается что-нибудь сделать. Не через Alt+F, например, а через просто F, K, S и так далее. Беда в том, что я никогда этими шорткатами не пользуюсь, они мне не нужны, но в настройках выключить не могу. Если бы были нужны, то лучше через какие-то комбинации клавиш. И вот заполняю я форму на этом сайте, нечаянно фокус не выставил, начал набирать текст — а сайт в этом время заполнил форму, завёл тикет в саппорт, приготовил глазунью и включил тёмную тему. Теперь могу сделать себе через браузерные расширения или закладки отключение этой ненужной мне функции.



Эта апишка работает только в Chromium-браузерах, но довольно давно. Как прогрессивное улучшение — почему бы и не да.



https://developer.chrome.com/blog/better-full-screen-mode/