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

Отслеживание элемента с фокусом

  • Статья

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

Использование динамического выражения для определения элемента с фокусом

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

  1. Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.

  2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

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

  4. На панели быстрого просмотра выберите вкладку Консоль :

    Средство

  5. Нажмите кнопку Создать динамическое выражение (Создать динамическое выражение). Откроется раздел Динамическое выражение:

    Создание динамического выражения

  6. В текстовом поле Выражение введите следующее: document.activeElement

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

    Результат динамического выражения

  8. Щелкните отображаемую веб-страницу, чтобы сосредоточиться на ней, а затем нажмите клавиши TAB или SHIFT+TAB , чтобы переместить фокус на отображаемую веб-страницу.

    Значение, которое отображается ниже document.activeElement , является результатом выражения . При нажатии клавиши TAB для перемещения между элементами веб-страницы document.activeElement значение изменяется:

    Результат динамического выражения, когда текстовое поле сосредоточено на веб-странице

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

Значение динамического выражения отображается в консоли только в виде предварительного просмотра текста. Для отображения узлов DOM используются имена тегов и необязательные атрибуты класса или идентификатора. Например:

  • Элемент <a href="#alpacas">Alpacas</a> привязки отображается a#alpacas в результате динамического выражения.
  • В результате динамического выражения отображается input текстовое поле<input>.

Чтобы указать, какой элемент имеет фокус на отображаемой веб-странице, используйте инструмент Элементы , как описано в следующем разделе.

Открытие элемента с фокусом в инструменте "Элементы"

Результатом динамического document.activeElement выражения является только предварительный просмотр элемента DOM с фокусом. Чтобы точно узнать, какой элемент имеет фокус на отображаемой веб-странице, используйте инструмент Элементы :

  1. В средстве Консоли наведите указатель мыши на результат динамического выражения (под динамическим выражением document.activeElement ).

    Элемент с фокусом выделен на отрисоченной веб-странице:

    Элемент с фокусом, выделенный на отрисовке веб-страницы

  2. Щелкните правой кнопкой мыши результат динамического выражения и выберите пункт Показать на панели элементов.

    В инструменте Элементы дерево DOM автоматически разворачивается и выбирает узел DOM, который сейчас сосредоточен:

    Элемент с фокусом, выбранный в инструменте

    Активный элемент — это представление дерева DOM элемента веб-страницы, к которому вы перешли, нажав клавиши TAB или SHIFT+TAB.

Создание ссылки на элемент фокуса в средстве "Консоль"

Чтобы управлять элементом фокуса в средстве Консоли , создайте ссылку на него:

  1. В средстве Консоли наведите указатель мыши на результат динамического выражения (под динамическим выражением document.activeElement ).

  2. Щелкните правой кнопкой мыши результат динамического выражения и выберите Сохранить внешнийHTML как глобальную переменную.

    Новое имя переменной, например , temp1 отображается в средстве "Консоль" , а ее значение отображается ниже:

    Элемент с фокусом в качестве новой переменной в средстве

  3. При необходимости используйте элемент в средстве Консоли с помощью переменной temp1 . Например, выполните команду temp1.value = "cat" , чтобы изменить значение элемента фокуса на "cat":

    Значение элемента фокуса изменяется на

См. также

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Кейс Баски.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.