Как сделать фокус на input
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
React поддерживает создание сайтов c доступным контентом в том числе с помощью стандартных возможностей HTML.
Стандарты и руководства
Руководство по обеспечению доступности контента (WCAG)
Руководство по обеспечению доступности контента (WCAG), разработанное консорциумом W3C, описывает рекомендации по созданию сайтов с доступным контентом.
Также есть ресурсы с чек-листами требований WCAG, например:
Доступность контента в веб-приложениях (WAI-ARIA)
Свод правил по доступности контента в веб-приложениях (WAI-ARIA) — это документ, который посвящён реализации требований доступности контента при разработке JavaScript-программ и компонентов.
Нужно отметить, что все HTML-атрибуты aria-* полностью поддерживаются в JSX. Несмотря на то, что большинство DOM-свойств и атрибутов в React пишутся в стиле camelCase, атрибуты aria-* должны быть написаны с разделением дефисами. Такой стиль ещё известен как шашлычная нотация (kebab-case) или в стиле языка Лисп (lisp-case). Вот как выглядит такое оформление в JSX:
Семантическая вёрстка — это основа доступности контента в веб-приложениях. Используя различные HTML-элементы можно улучшить восприимчивость и понятность ваших сайтов. Это позволяет сделать контент доступным без особых усилий.
Бывают случаи, когда семантическая вёрстка нарушается. Например, при добавлении элемента
Коллекцию элементов можно преобразовать в массив фрагментов или любых других элементов:
Если нет необходимости использовать пропсы, то можно применять сокращённую запись фрагментов:
Обратите внимание, что не все инструменты поддерживают сокращённую запись. Подробности в документации фрагментов.
Доступность контента в формах
Каждый элемент управления, например, или
, должен иметь подпись, обеспечивающую доступность контента. Подписи нужно выполнять так, чтобы их могли использовать экранные считывающие устройства и другие технические средства реабилитации.
Вот рекомендации о том, как это делать:
Эти стандартные для HTML способы могут использоваться в React напрямую, однако не забывайте, что атрибут for в JSX записывается как htmlFor :
Приложение с доступным контентом должно функционировать при использовании только клавиатуры. Убедитесь, соответствует ли ваше приложение этому требованию:
Фокус клавиатуры и контур элемента
Фокус клавиатуры указывает на тот элемент в структуре DOM, который в данный момент готов принимать ввод с клавиатуры. Обычно такой элемент выделяется контуром, как это показано на рисунке:
Если вы заменяете стандартную реализацию фокуса своей, удалить контуры элементов можно с помощью CSS, установив outline: 0 .
Механизмы быстрого перехода к нужному контенту
Также на сайте нужно реализовать механизмы, которые помогают пользователям быстро переходить к нужному контенту с помощью клавиатуры.
Ссылки для быстрого перехода — это скрытые навигационные ссылки, которые становятся видимыми, когда пользователи взаимодействуют со страницей с помощью клавиатуры. Такие ссылки очень легко сделать, используя внутренние якоря страницы и CSS:
Узнать больше о применении секционной разметки для улучшения доступности контента можно здесь:
Программное управление фокусом
В статье на MDN рассматриваются способы навигации с клавиатуры в JavaScript.
Чтобы управлять фокусом в React, можно использовать рефы на DOM-элементы.
При таком подходе мы сначала создаём в классе компонента реф на элемент в JSX:
Теперь при необходимости можно установить фокус на этот элемент из любого места компонента:
Иногда родительскому компоненту нужно установить фокус на элемент дочернего компонента. Мы можем сделать это с помощью рефа на родительский компонент, который присваивается специальному свойству дочернего компонента и используется для ссылки из родительского компонента на DOM-элемент дочернего.
Если для расширения функциональности компонент оборачивается компонентом высшего порядка, то рекомендуется перенаправлять рефы обёрнутого компонента с помощью React-функции forwardRef . В случае, когда сторонний HOC не поддерживает перенаправление рефов, описанный выше подход всё равно можно использовать в качестве запасного варианта.
Отличный пример управления фокусом показан в проекте react-aria-modal. Этот достаточно редкий случай реализации модального окна с полностью доступным контентом. В нём, кроме установки фокуса на кнопку отмены и перемещения фокуса внутри модальной формы, сделан возврат на элемент, инициировавший вызов модального окна. Нужно отметить, что первоначальная установка фокуса на кнопку отмены в модальном окне предотвращает случайное нажатие на клавиатуре кнопки подтверждения запрашиваемого действия.
Примечание:
Правильное управление фокусом — это важный момент в обеспечении доступности контента, однако стоит применять его с умом. Используйте управление фокусом для восстановления нарушенной последовательности действий при работе с клавиатурой. Не стоит предугадывать желания пользователя и подталкивать его к каким-либо действиям в приложении.
Работа с событиями мыши
Позаботьтесь, чтобы вся функциональность, связанная с событиями мыши, была доступна при работе только с клавиатурой. Если приложение сильно зависит от действий мыши, многие пользователи, которые используют только клавиатуру, не смогут работать с ним.
Чтобы продемонстрировать это, рассмотрим подробный пример, когда доступность контента нарушается из-за ориентации только на щелчок мыши. В примере показан паттерн закрытия всплывающего списка при щелчке мышью за пределами этого элемента.
Обычно такая функциональность реализуется событием click объекта window , обработчик которого закрывает выпадающий список:
Такой подход хорош для тех, кто использует мыши, тачпады или другие координатные устройства, однако для пользователей, работающих только с клавиатурой, он может стать причиной нарушения работы программы при попытке перехода к следующему элементу с помощью клавиши Tab . Причиной этого является то, что в данной ситуации объект window никогда не получит событие click . В итоге мы имеем заблокированную функциональность и невозможность продолжения работы с приложением.
Подобное поведение можно получить используя обработчики сопутствующих событий, например, onBlur или onFocus :
С этой программой можно работать и с помощью клавиатуры, и с помощью координатного устройства. Также в неё добавлены атрибуты aria-* для людей, использующих экранные считывающие устройства. Для упрощения примера, в нём не реализовано перемещение по списку с помощью стрелок на клавиатуре.
Это один из множества случаев, когда поведение программы зависит только от положения курсора и событий мыши, а для пользователей, работающих с клавиатурой, её функциональность недоступна. Тестирование пользовательского интерфейса с помощью клавиатуры позволяет быстро найти проблемные места, работу которых можно улучшить, используя обработчики событий клавиатуры.
Усложнение пользовательского интерфейса не должно ухудшать доступность контента. Несмотря на то, что лучший результат достигается при максимальном использовании синтаксиса HTML, даже очень сложный компонент можно сделать доступным для всех.
В руководстве по доступности контента в веб-приложениях собраны все необходимые сведения о ролях ARIA, а также о состояниях и свойствах ARIA. Описанные в руководствах HTML-атрибуты полностью поддерживаются в JSX. Используя их можно создавать функционально нагруженные и при этом полностью доступные React-компоненты.
Каждый тип компонентов имеет специфическую архитектуру и предполагает определённую функциональность, как для пользователей, так и для браузеров:
На что ещё нужно обратить внимание
Обязательно указывайте язык текста на странице. Это необходимо для корректной установки опций экранных считывающих устройств:
Всегда устанавливайте заголовок для правильного описания контента текущей страницы. Это позволит пользователю постоянно быть в курсе контекста страницы:
Реализовать эти требования в React можно с помощью компонента DocumentTitle .
Убедитесь, что все тексты на вашем сайте имеют правильную цветовую контрастность, чтобы обеспечить максимальное удобство чтения для пользователей с плохим зрением:
Ручной расчёт правильных цветовых комбинаций для всех вариантов сайта может быть очень утомительным. Вместо этого вы можете рассчитать все необходимые палитры с помощью Colorable.
Оба инструмента, aXe и WAVE, о которых будет рассказано ниже, включают тесты контрастности. Они помогут выявить ошибки в подборе цветов.
Если вы хотите провести более полное тестирование контрастности, то можете воспользоваться этими программами:
Инструменты для разработки и тестирования
Далее перечислены инструменты, которые могут быть полезны при разработке веб-приложений с доступным контентом.
Самый простой и одновременно наиболее важный вид проверки — это тестирование клавиатуры. Такая проверка позволяет определить доступность контента на вашем сайте при работе только с клавиатурой. Чтобы протестировать клавиатуру, выполните следующие действия:
- Отключите мышь.
- Используйте Tab и Shift+Tab для перемещения по странице.
- Используйте Enter для активации элементов.
- Там, где необходимо, используйте клавиши со стрелками, например, для работы с меню или выпадающими списками.
Выполнение некоторых требований по доступности контента можно контролировать непосредственно в JSX. Обычно среда разработки обладает средствами автоматической подстановки, которые могут использоваться при написании JSX для выбора ролей, состояний и свойств ARIA. Кроме этого можно воспользоваться следующими инструментами:
В Create React App этот плагин используется с заранее установленным набором правил. Если необходимо задействовать дополнительные правила, вам нужно создать в корне проекта файл .eslintrc со следующим кодом:
Тестирование доступности контента в браузере
Существуют инструменты для аудита доступности контента веб-страниц в браузере. Используйте их совместно с теми инструментами для проверки HTML, которые были описаны выше.
aXe, aXe-core и react-axe
Компания Deque Systems предлагает модуль aXe-core для автоматизированного и сквозного тестирования веб-приложений. Этот модуль имеет интеграцию с Selenium.
На основе aXe-core разработан продукт компании Deque Systems под названием The Accessibility Engine или aXe. Это расширение для браузеров, предназначенное для комплексного тестирования доступности контента сайтов.
Web Accessibility Evaluation Tool ещё одно расширение для браузера, которое используется для улучшения доступности контента веб-сайтов.
Инспекторы доступности контента и дерево доступности
Дерево доступности — это подмножество DOM-дерева. В нём содержатся объекты, которые нужны для работы технологий поддержки доступности контента, например, для экранных считывающих устройств.
В некоторых браузерах можно легко получить информацию обо всех элементах в дереве доступности:
Экранные считывающие устройства
Проверка работы экранных считывающих устройств должна быть частью комплексного тестирования доступности контента.
Учтите, что сочетание браузера и экранного считывающего устройства имеет большое значение. Рекомендуется протестировать ваше приложение в том браузере, который лучше всего подходит для избранного вами экранного считывателя.
Общедоступные экранные считыватели
NonVisual Desktop Access или NVDA — это широко распространённый экранный считыватель с открытым исходным кодом для Windows.
Вот несколько руководств по работе с NVDA:
VoiceOver в Safari
VoiceOver — это экранный считыватель, встроенный в продукты Apple.
Здесь приведены руководства по активации и использованию VoiceOver:
JAWS в Internet Explorer
Job Access With Speech or JAWS — это экранный считыватель, который чаще всего используется в Windows.
Руководства по JAWS:
Прочие экранные считыватели
ChromeVox в Google Chrome
ChromeVox — это встроенный экранный считыватель для ноутбуков Chromebook. Он доступен для Google Chrome в виде расширения.
jQuery метод .focus() привязывает JavaScript обработчик событий "focus" (получение фокуса элементом), или запускает это событие на выбранный элемент.
jQuery синтаксис:
Обращаю Ваше внимание, что метод .focus(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():
Добавлен в версии jQuery
Значения параметров
| Параметр | Описание |
|---|---|
| eventData | Объект, содержащий данные, которые будут переданы в обработчик событий. |
| handler | Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event . |
Пример использования
В этом примере с использованием jQuery метода .focus() мы при нажатии на элемент (кнопка) вызываем событие "focus" на элементе . Самому элементу задаем, что при срабатывании события "focus" на элементе выполнить функцию, которая с использованием метода .attr() добавляет атрибут placeholder со значением focus.
Кроме того, мы с использованием jQuery метода .blur() устанавливаем, что при получении фокуса элементом вызвать функцию, которая с использованием метода .attr() добавляет атрибут placeholder со значением blur.
Результат нашего примера:
Пример использования jQuery метода .focus() (без параметров и с функцией) jQuery события
Текстовые поля, вкладки и окна, которые могут размещаться в HTML-формах, имеют событие, с помощью которого с ними можно взаимодействовать. Это событие называется фокусом.
Что такое фокус на текстовом поле?
Фокус – это состояние элемента, когда он активен, т.е. любые ваши действия, например ввод текста с клавиатуры, будут взаимодействовать именно с тем элементом, на котором в данный момент находится фокус. Отличительной особенностью фокуса на текстовом поле – является мигание курсора для ввода.
Нужно понимать, что клик (click) по элементу и фокус на элементе – это два совершенно разных события. Клик по элементу это всего лишь один из способов, как можно поместить в него фокус, т.е. сделать его активным. Как альтернативный вариант задания фокуса элементу, служит клавиша Tab на клавиатуре.
В Javascript есть специальное событие, которое называется focus(), оно выполняется, когда элемент получает фокус.
Давайте рассмотрим пример, как это работает:
Больше моих уроков по Javascript здесь.
HTML-код:
Javascript:
Кроме того, есть специальный html-атрибут, который позволяет отследить получение фокуса элементом. Этот атрибут называется onfocus. Вот пример, как можно использовать его на практике:
Потеря фокуса — это когда пользователь уходит с одного элемента формы и переходит на другой элемент будь то текстовое поле или выпадающий список. Но давайте обо всем подробнее.
События focus/blur
Итак событие focus вызывается тогда, когда пользователь фокусируется на элементе или просто выбирает его, а blur – когда фокус исчезает, например посетитель кликает на другом месте экрана или другом элементе формы.
Давайте для примера сразу посмотрим на них в деле, используем для проверки введённых в форму значений.
Методы focus/blur
Также в Javascript имеются и методы с теми же названиями, которые переводят/уводят фокус с элемента.
Давайте для примера изменим пример выше, чтобы при неверном вводе посетитель просто не мог уйти с элемента до тех пор пока не введет правильное значение:
Обращаю внимание на такой случай – если из события onblur сделать event.preventDefault(), то такого же эффекта не будет, потому что onblur срабатывает уже после того, как элемент потерял фокус.
HTML5 и CSS3 вместо focus/blur
Прежде чем мы перейдем к более сложным примерам, использующим JavaScript, давайте рассмотрим 3 примера, когда его Javascript использовать не надо, а достаточно современного HTML/CSS.
Подсветка при фокусировке
Стилизация полей ввода может быть решена средствами CSS (CSS2.1), а именно – селектором :focus:
Автофокус
При загрузке страницы, если на ней существует элемент с атрибутом autofocus – браузер автоматически фокусируется на этом элементе.
Как правило, этот атрибут используется при изначальной загрузке, для страниц поиска и так далее, где главный элемент очевиден.
Плейсхолдер
Плейсхолдер – это значение-подсказка внутри INPUT, которое автоматически исчезает при фокусировке и существует, пока посетитель не начал вводить текст.
В некоторых браузерах этот текст можно стилизовать:
Разрешаем фокус на любом элементе: tabindex
По умолчанию не все элементы поддерживают фокусировку.
Элементы, которые не поддерживают могут отличаться в з ависимости от броузера, но одно лишь верно всегда – заведомо поддерживают focus/blur те элементы, c которыми посетитель может взаимодействовать: , , , и т.д.
С другой стороны, на элементах для форматирования, таких как
, ,В HTML имеется атрибут tabindex.
Его основной смысл – это указать номер элемента при переборе элементов клавишей Tab.
Исключением являются специальные значения:
Любой элемент поддерживает фокусировку, если у него есть tabindex.
Делегирование с focus/blur
События focus и blur к сожалению не всплывают ( про всплытие событий я писал здесь).
Это грустно, поскольку мы не можем использовать делегирование с ними. Например, мы не можем сделать так, чтобы при фокусировке в форме она вся подсвечивалась:
Пример выше не работает, т.к. при фокусировке на любом событие focus срабатывает только на этом элементе и не всплывает наверх. Так что обработчик onfocus на форме никогда не сработает.
Что делать? Неужели мы должны присваивать обработчик каждому полю ?
Это забавно, но хотя focus/blur не всплывают, они могут быть пойманы на фазе перехвата.
Вот так сработает:
События focusin/focusout
События focusin/focusout – то же самое, что и focus/blur, только в отличие от них они всплывают.
У них есть 2 особенности:
- Не поддерживаются Firefox
- Должны быть назначены не через on-свойство, а при помощи elem.addEventListener.
Подсветка формы в примере ниже работает во всех браузерах.
Итого
События focus/blur происходят соответственно при получении и снятии фокуса с элемента формы.
У них есть особенности:
- Они не всплывают. Но на фазе перехвата их можно перехватить.
- По умолчанию многие элементы не могут получить фокус. Например, если вы кликните по DIV, то фокусировка на нем не произойдет.Но это можно изменить, если поставить элементу атрибут tabIndex. Этот атрибут также дает возможность контролировать порядок перехода при нажатии Tab.
Задания
Улучшенный плейсхолдер
Реализуйте более удобный плейсхолдер-подсказку на JavaScript через атрибут data-placeholder.
Правила работы плейсхолдера:
Горячие клавиши
.
Изменения, внесенные в поле, можно сохранить обратно в
.
Если же нажать Esc, то
снова превращается в
Редактирование TD по клику
Сделать ячейки таблицы td редактируемыми по клику.
Красивый плейсхолдер для INPUT
Создайте для поля красивый, стилизованный плейсхолдер
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Читайте также: