Поделиться через

Реакция на взаимодействия с помощью клавиатуры (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

Совет  Информация в этом разделе относится к разработке приложений на JavaScript.

О разработке приложений на C++, C# или Visual Basic можно узнать из раздела Реакция на взаимодействия с помощью клавиатуры (XAML).

О разработке приложений на C++ с DirectX можно узнать из раздела Разработка элементов управления для мыши (DirectX и C++).

 

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

Создание первого приложения Магазина Windows на JavaScript

Схема создания приложений Магазина Windows на JavaScript

Дополнительные сведения о событиях см. в разделе Краткое руководство: добавление элементов управления HTML и обработка событий.

Компоненты приложения от начала до конца:

Дополнительные сведения об этой функциональности см. в нашей серии Компоненты приложения от начала до конца.

Взаимодействие с пользователем от А до Я (HTML)

Настройка взаимодействия с пользователем от А до Я (HTML)

Рекомендации по взаимодействию с пользователем:

Библиотеки элементов управления платформы (HTML и XAML) предоставляют все механизмы взаимодействия с пользователем, используемые в Windows, в том числе стандартные взаимодействия, анимированные физические эффекты и визуальную обратную связь. Если вы не планируете настраивать механизмы поддержки взаимодействий, используйте стандартные элементы управления.

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

Примеры: Примеры использования этой функциональности см. в коллекции примеров приложений.

Пример user interaction customization, start to finish

Ввод: пример возможностей устройства

Пример сенсорной клавиатуры

Реакция на появление примера экранной клавиатуры.

Описание

Ввод с клавиатуры — важная составляющая общего взаимодействия с пользователем в приложениях. Клавиатура незаменима для пользователей с ограниченными возможностями и для тех, кто считает ее наиболее эффективным средством взаимодействия с приложением. Например, пользователи должны иметь возможность навигации в приложении с помощью клавиши TAB и клавиш со стрелками, активации элементов пользовательского интерфейса с помощью клавиш ПРОБЕЛ и ВВОД, а также доступа к командам с помощью сочетаний клавиш.

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

Больше всего распространена внешняя, аппаратная клавиатура, которая физически подключается к устройству. Кроме аппаратной клавиатуры Windows 8 предоставляет пользователю две виртуальных клавиатуры:

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

    Экранная клавиатура

  • Сенсорная клавиатура — это визуальная программная клавиатура, используемая для сенсорного ввода текста. Сенсорная клавиатура в Windows не заменяет собой экранную клавиатуру, так как позволяет вводить только текст (она не эмулирует аппаратную клавиатуру) и появляется только тогда, когда фокус ввода находится в текстовом поле или в другом текстовом элементе управления с поддержкой редактирования.

    Примечание  Сенсорная клавиатура имеет более низкий приоритет, чем экранная, и в ее присутствии не отображается.

    Вот примеры сенсорной клавиатуры.

Windows — раскладка по умолчанию:

![Сенсорная клавиатура с раскладкой по умолчанию](images/Hh700405.touch_keyboard_standard(ru-ru,WIN.10).png "Сенсорная клавиатура с раскладкой по умолчанию")

Windows — раскладка для больших пальцев (может быть доступна не для всех языков):

![Сенсорная клавиатура с раскладкой для больших пальцев](images/Hh700405.touch_keyboard_thumb(ru-ru,WIN.10).png "Сенсорная клавиатура с раскладкой для больших пальцев")

Windows Phone — раскладка по умолчанию:

![Сенсорная клавиатура Windows Phone](images/Hh700405.touch_keyboard_phone_standard(ru-ru,WIN.10).png "Сенсорная клавиатура Windows Phone")

События клавиатуры

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

Событие Описание
keydown Происходит, когда нажата любая клавиша.
keyup Происходит, когда отпущена любая клавиша.
keypress Происходит, когда нажата буквенно-цифровая клавиша.

 

События клавиатуры и фокус

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

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

Для того чтобы элемент управления получил фокус, он должен быть включенным и видимым. Для большинства элементов управления это состояние по умолчанию. При наличии у элемента управления фокуса ввода он может вызывать события ввода с клавиатуры и отвечать на них, как описано далее в этой теме. Также вы можете отвечать на получение или потерю фокуса элементом управления, обрабатывая события focus, focusin, blur и focusout.

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

Обработчики событий клавиатуры

Обработчики событий рекомендуется добавлять программными средствами, а не объявлять в HTML (см. раздел Почему не следует регистрировать обработчик событий в разметке).

Существуют три события ввода, напрямую связанные со вводом с клавиатуры: keydown, keyup и keypress.

Большая часть обработчиков событий принимает единственный аргумент — объект Event object, который содержит сведения о событии. К некоторым из самых полезных свойств событий клавиатуры относятся target, keyCode и currentTarget, если допускается восходящая маршрутизация событий.

Клавиша

Обычно прослушивание событий клавиатуры выполняется для обработки определенного значения клавиши. Чтобы определить, какая клавиша нажата или отпущена, проверьте значение keyCode в данных события. keyCode возвращает значение Key. Перечисление Key содержит все поддерживаемые клавиши.

Сочетания клавиш

Кроме того, чтобы реализовать навигацию и активацию при помощи клавиатуры в вашем приложении, рекомендуется назначить сочетания клавиш для функций приложения. Сочетание клавиш — комбинация клавиш (обычно клавиша с буквой в сочетании с клавишей-модификатором), улучшающая производительность при помощи предоставления пользователям удобного доступа к функциям приложения.

Клавиша доступа — сочетание клавиш, обеспечивающее доступ к элементу интерфейса вашего приложения. Клавиши доступа представляют собой сочетание клавиши ALT и клавиши с буквой.

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

Атрибут x-ms-acceleratorKey позволяет отправлять средствам чтения с экрана и другим специальным возможностям уведомление о том, что для команды существует сочетание клавиша. Этот атрибут не реализует поведение сочетания клавиш. Чтобы обработать сочетания клавиш в приложении, необходимо предоставить обработчики событий клавиатуры, такие как keydown, keyup и keypress.

Прослушивание и обработка события клавиатуры

В этом разделе мы покажем, как указать и определить обработчик для события keydown.

Примечание  Эти примеры взяты из Примера custom user interaction, который дополняет тему Настройка взаимодействия с пользователем от А до Я (HTML).

 

Этот обработчик событий фильтрует все нажатия клавиш и обрабатывает только клавиши Стрелка влево и Стрелка вправо.

// Key down handler. 
// Take input from only the left and right arrow keys.
// Left: counter-clockwise rotation.
// Right: clockwise rotation.
this._element.addEventListener("keydown", function onKeyDownE(eventInfo) {
    // Process keystroke only if color selected.
    if (!that.selectedColor) {
        return;
    }
    if (eventInfo.target === msGesture_ColorMixer.target) {
        if (that._focus === false) {
            return;
        }
        // Set increment or decrement value based on key pressed.
        var increment;
        if (eventInfo.keyCode === WinJS.Utilities.Key.leftArrow) {
            increment = -1;
        }
        else if (eventInfo.keyCode === WinJS.Utilities.Key.rightArrow) {
            increment = 1;
        }
        else return;

        // Attach first contact and track input device type.
        if (!that._pointerType) {
            that._pointerType = "keyboard";
        }
        // Rotate the color mixer.
        _Rotate(increment);
        // Event tracking.
        //document.getElementById("status").innerHTML += "keydown :: " + eventInfo.keyCode;
    }
}, false);

Объявите сочетания клавиш в HTML-разметке с помощью атрибутов accesskey и x-ms-acceleratorkey.

<div class="ColorSelector" id="colorSelector">
    <!-- 
        The aria-label attribute can be used when:
            - the name of an element cannot be determined 
              programmatically from the content of the element.
            - providing a visible label and/or tooltip is not 
              the desired user experience.
        However, if the label text is visible on screen, you should 
        use aria-labelledby instead of aria-label. 
    -->
    <div class="Color" 
         id="red" 
         aria-labelledby="redLabel redValue" 
         tabindex="0" 
         accesskey="R">
        <span class="ColorLabel" 
              id="redLabel" 
              data-win-res="{textContent: 'colorpicker_red'}" />
        <span class="ColorValue" id="redValue" />
    </div>
    <div class="Color" 
         id="green" 
         aria-labelledby="greenLabel greenValue" 
         tabindex="0" 
         accesskey="G">
        <span class="ColorLabel" 
              id="greenLabel" 
              data-win-res="{textContent: 'colorpicker_green'}" />
        <span class="ColorValue" id="greenValue" />
    </div>
    <div class="Color" 
         id="blue" 
         aria-labelledby="blueLabel blueValue" 
         tabindex="0" 
         accesskey="B">
        <span class="ColorLabel" 
              id="blueLabel" 
              data-win-res="{textContent: 'colorpicker_blue'}" />
        <span class="ColorValue" id="blueValue" />
    </div>

<!-- 
Ctrl+S invokes the Save button and is exposed by a tooltip. 
-->
<button 
  id="sendButton" 
  value="Send" 
  title="Send (Ctrl+S)" 
  x-ms-acceleratorkey="S">Send</button>

Платформа поддерживает функциональность клавиатуры для настройки фокуса или вызова элементов, но вам следует реализовать обработчики событий клавиатуры, такие как keydown, keyup и keypress, чтобы обрабатывать сочетания клавиш в своем приложении.

var sendButton = document.getElementById('sendButton');
sendButton.addEventListener('keyup', function(e) {
  var itm = e.srcElement;
  if (e.ctrlKey && e.keyCode === WinJS.Utilities.Key.s ) {
    // Invoke send functionality.
  }
});

Модификаторы событий

preventDefault отменяет действие события по умолчанию, не останавливая распространение события через модель DOM. Используйте свойство cancelable, чтобы проверить, можно ли отменить событие, поскольку вызов метода preventDefault для события, которое невозможно отменить, ни к чему не приведет.

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

Сенсорная клавиатура

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

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

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

Нажатия клавиш на сенсорной клавиатуре вызывают события keydown и onkeyup так же, как и нажатия клавиш на аппаратной клавиатуре. Однако сенсорная клавиатура не вызывает событий ввода для сочетаний клавиш CTRL+A, CTRL+Z, CTRL+X, CTRL+C и CTRL+V, которые зарезервированы для обработки текста в элементе управления вводом.

Руководство пользователя по поддержке взаимодействия с помощью клавиатуры

Вот некоторые правила поддержки взаимодействий с помощью сенсорной клавиатуры.

Общие правила

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

     

  • При запуске приложения установите первоначальный фокус клавиатуры на элементе, с которым пользователи начнут (или с наибольшей вероятностью начнут) взаимодействие в первую очередь. Обычно самое подходящее расположение — в основном режиме просмотра содержимого приложения, чтобы пользователь мог сразу же просмотреть содержимое с помощью клавиш со стрелками. Для получения дополнительных сведений об установке фокуса на определенных элементах управления, см. focus.

  • Обеспечьте логичность перемещения по содержимому с помощью клавиши TAB и клавиш со стрелками.

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

  • Используйте клавиши со стрелками в качестве сочетания клавиш для правильной навигации между дочерними элементами составных элементов. Если в узлах дерева развертывание/свертывание и активация узла выполняются разными дочерними элементами, используйте клавиши СТРЕЛКА ВЛЕВО и СТРЕЛКА ВПРАВО, чтобы добавить функцию управления развертыванием/свертыванием.

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

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

    Клавиша доступа — это сочетание клавиш, обеспечивающее доступ к элементу интерфейса вашего приложения. Они представляют собой сочетание клавиши ALT и клавиши с буквой.

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

    Вы должны предоставить пользователям, которые пользуются средствами чтения с экрана и другими специальными возможностями, простой способ узнать сочетания клавиш для вашего приложения. Вам следует объявить сочетания клавиш в HTML-разметке вашего приложения при помощи атрибутов accessKey и -ms-AcceleratorKey и информировать о них при помощи всплывающих подсказок, специальных имен, специальных описаний и других видов экранной связи. Помните, что клавиши быстрого вызова должны быть подробно описаны в разделе справки приложения.

    Дополнительные сведения о реализации клавиш быстрого вызова см. в разделе о сочетаниях клавиш справочника Windows по взаимодействию с пользователями.

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

Оборудование

Запросите возможности клавиатуры (KeyboardCapabilities), чтобы определить, подключена ли клавиатура и к каким аспектам пользовательского интерфейса вашего приложения у аппаратной части клавиатуры есть прямой доступ. Дополнительные сведения о запросе возможностей устройств см. в разделе Краткое руководство: распознавание устройств указания.

Сопоставьте кнопки клавиатуры с соответствующим пользовательским интерфейсом (с кнопками "Назад" и "Вперед") вашего приложения.

Визуальная обратная связь

  • Используйте прямоугольники фокуса только при взаимодействии с помощью клавиатуры. Если пользователь инициирует сенсорное взаимодействие, сделайте так, чтобы пользовательский интерфейс клавиатуры постепенно исчезал. В этом случае пользовательский интерфейс будет аккуратным, не загроможденным лишними элементами.
  • Не отображайте визуальную обратную связь, если элемент не поддерживает взаимодействия (например, статический текст).
  • Отображайте визуальную обратную связь одновременно для всех элементов, представляющих одну и ту же цель ввода.
  • Предусмотрите экранные кнопки (например, "+" и "–") для эмуляции сенсорных операций, таких как сдвиг, поворот, масштабирование и пр.

Дополнительные общие рекомендации по визуальной обратной связи см. в разделе Руководство по визуальной обратной связи.

Связанные разделы

Понятия

Реакция на взаимодействие с пользователем

Реализация специальных возможностей клавиатуры

Краткое руководство. Добавление элементов управления HTML и обработка событий

Отображение и редактирование текста