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

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

const readonlyFields = document.querySelectorAll('input[readonly]');
readonlyFields.forEach(field => {
  field.addEventListener('keydown', event => {
    if (event.key === 'Tab') {
      event.preventDefault();
    }
  });
});

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

Метод 2: События указателя CSS
Другой подход — использовать CSS для отключения событий указателя в полях, доступных только для чтения. Если для свойства pointer-eventsустановлено значение «нет», поле перестанет реагировать на щелчки мыши, включая навигацию по вкладкам. Вот пример:

input[readonly] {
  pointer-events: none;
}

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

Метод 3: атрибут роли ARIA
Чтобы повысить доступность, мы также можем использовать атрибут роли ARIA (доступные насыщенные интернет-приложения), чтобы информировать вспомогательные технологии о состоянии поля только для чтения. Добавляя атрибут role="textbox"к полям только для чтения, мы сообщаем, что они предназначены только для отображения. Вот пример:

<input type="text" readonly role="textbox" value="Readonly Field">

При использовании атрибута role="textbox"вспомогательные технологии распознают поле как текстовое поле, но не разрешают пользовательский ввод или навигацию по вкладкам.

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