TGViewer
mefody.dev mefody.dev @mefody_dev · 5.39K subscribers
Post #66 1.72K
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/
  • 👍 11
  • ❤ 5
More from @mefody_dev
  1. Sep 28, 2026View Transitions Toolkit Брамус делится своей коллекцией утилит, чтобы можно было более уд…
  2. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  3. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  4. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  5. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  6. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →