Почему сочетания клавиш не работают в макетах, отличных от американских, и как разработчики могут это исправить

Почемусочетанияклавишнеработаютвмакетахотличныхотамериканскихикакразработчикимогутэтоисправить

В прошлом 020 месяцев, я много думал о сочетаниях клавиш и о том, как их обрабатывают разные приложения. Я не должен жаловаться; Я знал, во что ввязываюсь, когда начал создавать KeyCombiner , приложение для обучения и поиска ярлыков и текстовых фрагментов. Тем не менее, я не совсем понимал, насколько беспорядочно обработка сочетаний клавиш в Интернете.

Вы используете международную раскладку клавиатуры? Тогда вы уже знаете, о чем я говорю. Вероятно, у вас были проблемы с набором сочетаний клавиш, таких как alt + / или cmd + для навигации вперед и назад.

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

Интересным примером являются приложения Google. По какой-то причине Google удается правильно обрабатывать международные макеты в Gmail, но не может этого сделать ни в одном из других своих приложений. В Интернете полно жалоб, например, на Google Таблицы , Google Диск и Google Docs .

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

Эта жалоба в форумах Asana тоже смешно. Они внесли некоторые специфические изменения в некоторые макеты, но в конце отказались и заявили, что они по-прежнему не будут поддерживать более экзотические макеты.

Также есть много жалоб на Notion, см. здесь или здесь . Тем не менее, конкуренция не намного лучше , это нерешенная проблема для Roam Research .

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

Меня сбивает с толку то, что проблема существует в приложениях, которые каждый раз используют миллионы людей. day, разработанная гигантскими корпорациями, которые гордятся своими лучшими инженерами в мире. Почему это сбивает с толку? Поскольку основные технические проблемы довольно тривиальны!

Веб-приложения используют JavaScript для обработки сочетаний клавиш. Для этого они прослушивают события клавиатуры, которые генерируются вашим браузером всякий раз, когда вы нажимаете клавишу. Вот где это становится немного запутанным. Эти события клавиатуры имеют несколько свойств, которые можно использовать для определения нажатых клавиш. Что еще хуже, с одним нажатием кнопки связаны три разных события: keydown нажатие клавиши keyup . Большинство приложений используют библиотеку Javascript, которая обрабатывает все эти вещи за них, в первую очередь HotKeys.js или Мышеловка . Давайте посмотрим , что делает Hotkeys.js :

 
  let  клавиша  =  occasion.keyCode  ||  событие, которое  ||  occasion.charCode;   

Оно использует ключевой код , который, или же charCode , чтобы узнать, какая клавиша была нажата. Почему это проблема? Во-первых, все три свойства устарели. Но это даже не главная проблема. Эти свойства события просто не подходят для определения того, какой символ был нажат, по крайней мере, при использовании с нажатой клавишей или клавиатура . Тем не менее подавляющее большинство веб-приложений используют нажатие клавиши даже с этими свойствами. Очень четко задокументировано, что этого делать не следует и что это несовместимо с разными макетами, операционными системами и даже браузерами. Чтобы процитировать веб-документы MDN:

Веб-разработчики не должны использовать атрибут keyCode для печатаемых символов при обработке событий нажатия и нажатия клавиш. Как описано выше, атрибут keyCode бесполезен для печатных символов, особенно тех, которые вводятся с нажатой клавишей Shift или Alt. При реализации обработчика сочетаний клавиш событие нажатия клавиши обычно лучше.

Используя Chrome в Linux с немецкой клавиатурой, моя клавиша # выдаст требуемый keyCode для запуска / ярлыки. Однако это не работает в Firefox и не работает в Chrome в macOS. При использовании многих комбинаций браузера и ОС этот ярлык невозможно запустить на немецком макете. То же самое касается многих других международных раскладок клавиатуры, в которых нет выделенной / - клавиши.

Если вы хотите увидеть, какие нажатия кнопок вызывают какие свойства события, вы можете использовать этот небольшой изящный веб-инструмент:

https://w3c.github.io/uievents/tools/key-event-viewer.html
Совет для разработчиков: переключите раскладку клавиатуры вашего компьютера на другую, кроме США, чтобы отладить обработку ярлыков вашего приложения на разных раскладках.

Используя эту программу просмотра событий, вы увидите, что нажатие клавиши обычно дает правильный код для любого макета. К сожалению, это событие устарело в целом и связано с собственными проблемами. Тем не менее, библиотека Mousetrap может использовать keypress событие с довольно хорошими результатами для международных макетов.

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

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

Простые обходные пути

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

Не используйте специальные символы для сочетаний клавиш.

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

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

Если вам действительно нужно использовать специальные символы, предоставьте альтернативы, которые можно вводить на любой раскладке клавиатуры. И HotKeys.js, и Mousetrap поддерживают несколько триггеров при создании привязок. Например, если у вас есть / в качестве ярлыка для фокусировки поля поиска, потому что ваши пользователи из США привыкли к такому поведению, просто добавьте alt + s в качестве альтернативы для международных пользователей. Некоторые пользователи из США также могут приветствовать это изменение, потому что alt + s можно набирать только левой рукой, в то время как / требует, чтобы люди брали руку за мышь.

Технические исправления

Фактически заставьте сочетания клавиш работать с любой раскладкой клавиатуры.

Это означает, что комбинация клавиш alt + / , ярлык должен срабатывать, когда пользователь немецкого макета нажимает alt + сдвиг + 7 . Это на удивление просто с некоторыми из популярных библиотек обработки ярлыков. С Mousetrap все, что вам нужно сделать, это прослушать нажатие клавиши вместо нажатой клавиши . В следующем разделе этого поста я упомяну некоторые приложения, которые работают таким образом. К сожалению, у этого подхода есть небольшой недостаток. Это может сделать некоторые ярлыки утомительными для набора на некоторых макетах, например, требуя двух или трех модификаторов. Это также может привести к конфликтам быстрого доступа. Ctrl + / внезапно совпадает с ctrl + shift + 7 . Вы должны знать об этом и не назначать эти вещи двум разным привязкам. Самый простой способ избежать таких конфликтов - избегать использования модификатора Shift при определении привязок.

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

keyboard.getLayoutMap API . KeyCombiner использует этот API для отображения своего

экранные виртуальные клавиатуры с раскладкой пользователя. Иногда я сам задумываюсь о том, чтобы сделать такую ​​библиотеку. KeyCombiner уже использует форк Mousetrap, который был немного настроен. Однако у меня уже есть ответственная работа на полную ставку и большой побочный проект, поэтому я буду рад, если вы меня опередите.

Разрешить пользователям изменять привязки клавиш по умолчанию.

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

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

К счастью, некоторые приложения уже делают это правильно. Я использую три приложения, в которых мой немецкий макет работает безупречно: GMail, Linear и Discourse.

Gmail

Трудно поверить, что Gmail создается той же компанией, что и Google Drive, Google Chat и многие другие приложения, не поддерживающие ярлыки. правильно на международных раскладках. Веб-интерфейс Gmail отлично работает со всеми макетами, которые я тестировал. На моем немецком макете я даже могу использовать AltGr + 8 для архивирования беседы ( [). Simil Как правило, поиск может быть запущен с помощью shift + 7 ( / ). Обратите внимание, что это

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

Дискурс

Discourse - отличный пример, потому что это приложение с открытым исходным кодом, а это означает, что вы можете перейти к их

Репозиторий GitHub и увидеть как они это делают . Ответ очень прост: они используют библиотеку Mousetrap с нажатием клавиши . Как объяснялось выше, keyCode / который/ charCode будет содержать правильный код даже в международных макетах при использовании с нажатие клавиши.

Линейный

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

Знаете ли вы другие приложения, которые работают со всеми раскладками клавиатуры? Пожалуйста, дайте мне знать в комментариях ниже, и я добавлю их сюда.

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

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

Leave a comment

Your email address will not be published. Required fields are marked *