Статьи

Повышение удобства использования с помощью дополнительных клавиш навигации

Октябрь 2, 2018

При обработке событий клавиатуры в JavaScript большинство сценариев и приложений, как правило, придерживаются базового диапазона клавиш, обеспечивающих доступ к ядру — клавиши Tab для последовательной навигации, клавиши со стрелками для перехода вниз или двухмерной навигации, а также Enter и Клавиши пробела для нажатия и выбора вещей.

Это все хорошо, но есть и другие общие клавиши, которые вы могли бы рассмотреть, которые могут значительно улучшить удобство использования, предоставляя больший контроль — клавиши Page-up и Page-down можно использовать для быстрой навигации по большим группам данных, в то время как клавиши Home и End могут использоваться в качестве ярлыков для первого и последнего значения.

Большинство клавиатур Windows имеют специальные клавиши для них, но они также работают на Mac через комбинации модификаторов. Например, на моем Macbook есть дополнительная клавиша fn (функциональная), и она используется в сочетании с четырьмя клавишами со стрелками (например, fn + up для Page-up и fn + left для Home).

Ползунок управления

Ползунки являются отличным примером того, где эти клавиши могут быть использованы для хорошего эффекта. Клавиши со стрелками обычно используются для увеличения и уменьшения ползунка на одно значение, но мы также можем использовать клавиши Page-up и Page-down для изменения значения в большей пропорции, а также клавиши Home и End для установки ползунок до минимума и максимума.

Следующий код является выдержкой из ползунка поиска видеоплеера: 

switch(true)
{
  case (e.keyCode == 38 || e.keyCode == 39) : 
    
    if(++value > max) 
    { 
      value = max; 
    }
    break;
    
  case (e.keyCode == 37 || e.keyCode == 40) : 
    
    if(--value < 0) 
    { 
      value = 0; 
    }
    break;
    
  case (e.keyCode == 33) : 
    
    if((value = value + Math.round(max / 10)) > max)
    {
      value = max;
    }
    break;
    
  case (e.keyCode == 34) : 
    
    if((value = value - Math.round(max / 10)) < 0)
    {
      value = 0;
    }
    break;
    
  case (e.keyCode == 36) : 
    
    value = 0;
    break;
    
  case (e.keyCode == 35) : 
    
    value = (max - 1);
    break;
}

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

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

Обработка ключевых событий

Для справки, вот все значения keyCode

  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

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

Единственное, что я хотел бы здесь упомянуть в явном виде, это то, что навигационные клавиши могут обрабатываться только событиями keydownkeyup , а не событиями keypress События keydownфокус находится внутри вашего виджета , чтобы не блокировать их все время.

Интерпретация ключевых поведений

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

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

  • Дом означает минимум, начало или первый
  • Конец означает максимум, конец или последний
  • Подкачка означает увеличение на чанк или переход к следующему разделу или группе
  • Страница вниз означает уменьшение на часть или переход к предыдущему разделу или группе

Так, например, в контексте представления сообщений почтового приложения клавиша Home может перейти в начало списка, а клавиша End — в конец. Или в контексте управления громкостью музыкального проигрывателя, Page-up может увеличить громкость на четверть или половину, а Page-down делает обратное.

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

38
Share: