Фокус на элемент javascript

Element: focus event

The focus event fires when an element has received focus. The event does not bubble, but the related focusin event that follows does bubble.

The opposite of focus is the blur event, which fires when the element has lost focus.

The focus event is not cancelable.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("focus", (event) => >); onfocus = (event) => >; 

Event type

Event properties

This interface also inherits properties from its parent UIEvent , and indirectly from Event . FocusEvent.relatedTarget The element losing focus, if any.

Examples

Simple example

HTML

form id="form"> label> Some text: input type="text" placeholder="text input" /> label> label> Password: input type="password" placeholder="password" /> label> form> 

JavaScript

const password = document.querySelector('input[type="password"]'); password.addEventListener("focus", (event) =>  event.target.style.background = "pink"; >); password.addEventListener("blur", (event) =>  event.target.style.background = ""; >); 

Result

Event delegation

There are two ways of implementing event delegation for this event: by using the focusin event, or by setting the useCapture parameter of addEventListener() to true .

HTML

form id="form"> label> Some text: input type="text" placeholder="text input" /> label> label> Password: input type="password" placeholder="password" /> label> form> 

JavaScript

const form = document.getElementById("form"); form.addEventListener( "focus", (event) =>  event.target.style.background = "pink"; >, true, ); form.addEventListener( "blur", (event) =>  event.target.style.background = ""; >, true, ); 

Result

Specifications

Browser compatibility

See also

• The HTMLElement.focus() method
• Related events: blur , focusin , focusout
• This event on Window targets: focus event
• Focusing: focus/blur

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Фокусировка: focus/blur

Элемент получает фокус, когда пользователь кликает по нему или использует клавишу Tab . Также существует HTML-атрибут autofocus , который устанавливает фокус на элемент, когда страница загружается. Есть и другие способы получения фокуса, о них – далее.

Фокусировка обычно означает: «приготовься к вводу данных на этом элементе», это хороший момент, чтобы инициализовать или загрузить что-нибудь.

Момент потери фокуса («blur») может быть важнее. Это момент, когда пользователь кликает куда-то ещё или нажимает Tab , чтобы переключиться на следующее поле формы. Есть другие причины потери фокуса, о них – далее.

Потеря фокуса обычно означает «данные введены», и мы можем выполнить проверку введённых данных или даже отправить эти данные на сервер и так далее.

В работе с событиями фокусировки есть важные особенности. Мы постараемся разобрать их далее.

События focus/blur

Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус.

Используем их для валидации(проверки) введённых данных.

• Обработчик blur проверяет, введён ли email, и если нет – показывает ошибку.
• Обработчик focus скрывает это сообщение об ошибке (в момент потери фокуса проверка повторится):

 .invalid < border-color: red; >#error Ваш email: >; input.onfocus = function() < if (this.classList.contains('invalid')) < // удаляем индикатор ошибки, т.к. пользователь хочет ввести данные заново this.classList.remove('invalid'); error.innerHTML = ""; >>; 

Современный HTML позволяет делать валидацию с помощью атрибутов required , pattern и т.д. Иногда – это всё, что нам нужно. JavaScript можно использовать, когда мы хотим больше гибкости. А ещё мы могли бы отправлять изменённое значение на сервер, если оно правильное.

Методы focus/blur

Методы elem.focus() и elem.blur() устанавливают/снимают фокус.

Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:

 .error Ваш email:   

Это сработает во всех браузерах, кроме Firefox (bug).

Если мы что-нибудь введём и нажмём Tab или кликнем в другое место, тогда onblur вернёт фокус обратно.

Отметим, что мы не можем «отменить потерю фокуса», вызвав event.preventDefault() в обработчике onblur потому, что onblur срабатывает после потери фокуса элементом.

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

Потеря фокуса может произойти по множеству причин.

Одна из них – когда посетитель кликает куда-то ещё. Но и JavaScript может быть причиной, например:

• alert переводит фокус на себя – элемент теряет фокус (событие blur ), а когда alert закрывается – элемент получает фокус обратно (событие focus ).
• Если элемент удалить из DOM, фокус также будет потерян. Если элемент добавить обратно, то фокус не вернётся.

Из-за этих особенностей обработчики focus/blur могут сработать тогда, когда это не требуется.

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

Включаем фокусировку на любом элементе: tabindex

Многие элементы по умолчанию не поддерживают фокусировку.

Какие именно – зависит от браузера, но одно всегда верно: поддержка focus/blur гарантирована для элементов, с которыми посетитель может взаимодействовать: , , , и т.д.

Это можно изменить HTML-атрибутом tabindex .

Любой элемент поддерживает фокусировку, если имеет tabindex . Значение этого атрибута – порядковый номер элемента, когда клавиша Tab (или что-то аналогичное) используется для переключения между элементами.

То есть: если у нас два элемента, первый имеет tabindex=»1″ , а второй tabindex=»2″ , то находясь в первом элементе и нажав Tab – мы переместимся во второй.

Порядок перебора таков: сначала идут элементы со значениями tabindex от 1 и выше, в порядке tabindex , а затем элементы без tabindex (например, обычный ).

При совпадающих tabindex элементы перебираются в том порядке, в котором идут в документе.

Есть два специальных значения:

• tabindex=»0″ ставит элемент в один ряд с элементами без tabindex . То есть, при переключении такие элементы будут после элементов с tabindex ≥ 1 . Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными .
• tabindex=»-1″ позволяет фокусироваться на элементе только программно. Клавиша Tab проигнорирует такой элемент, но метод elem.focus() будет действовать.

Например, список ниже. Кликните первый пункт в списке и нажмите Tab :

Источник

.focus ( )

Метод, который устанавливает фокус на DOM-элемент, на котором вызван.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Вызов метода focus ( ) на DOM-элементе устанавливает фокус на этот элемент. Когда элемент находится в фокусе, он перехватывает и обрабатывает события клавиатуры.

Фокус нельзя поставить на элемент, если он заблокирован. Например, если у кнопки или поля ввода стоит атрибут disabled .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Метод focus ( ) обычно вызывается без аргументов, но в него также можно передать объект со свойством prevent Scroll :

 element.focus()element.focus(< preventScroll: true >) element.focus() element.focus( preventScroll: true >)    Скопировать Скопировано Не удалось скопировать   

По умолчанию браузер прокручивает страницу до элемента, на который перемещён фокус. Это так же происходит, если prevent Scroll установлен в false . Если prevent Scroll установлен в true , то прокрутки страницы к элементу не произойдёт.

Пример

Скопировать ссылку «Пример» Скопировано

Представим, что мы работаем с веб-страницей с формой:

   Your name:  Email: Подать заявку  form action="/apply" method="POST"> label> Your name: input type="text" name="name"> label> label> Email: input type="email" name="email" id="email"> label> button type="submit">Подать заявкуbutton> form>    Скопировать Скопировано Не удалось скопировать   

Чтобы программно установить фокус в поле Email нужно получить искомый элемент и вызвать метод focus ( ) на нём:

 const emailInput = document.getElementById('email')emailInput.focus() const emailInput = document.getElementById('email') emailInput.focus()    Скопировать Скопировано Не удалось скопировать   

После выполнения кода поле станет доступно для ввода.

В примере фокус перемещается в зависимости от выбранного элемента в выпадающем списке:

Как понять

Скопировать ссылку «Как понять» Скопировано

Что такое фокус?

Скопировать ссылку «Что такое фокус?» Скопировано

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

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

На фокус можно влиять с помощью HTML-атрибутов autofocus и tabindex , а также из JavaScript с помощью вызова методов focus ( ) и blur ( ) у DOM-элементов.

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

Когда нужен focus ( ) ?

Скопировать ссылку «Когда нужен focus()?» Скопировано

Бывают случаи, когда нужно программно установить фокус на элемент:

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

Эти случаи объединяет необходимость перемещать фокус непоследовательно, не так, как браузер делает по умолчанию. Произвольно переместить фокус позволяет метод focus ( ) .

Например, в случае с открытием модального окна нужно переместить фокус на него. Подпишемся на событие click на кнопке открытия окна и вызовем focus ( ) в обработчике:

 const openModalButton = document.getElementById('open-modal-button')const modalWindow = document.getElementById('modal-window')openModalButton.addEventListener('click', function(event)  modalWindow.focus()>) const openModalButton = document.getElementById('open-modal-button') const modalWindow = document.getElementById('modal-window') openModalButton.addEventListener('click', function(event)  modalWindow.focus() >)    Скопировать Скопировано Не удалось скопировать   

Полный пример реализации модального окна описан в WAI-ARIA Authoring Practices.

Не на каждый элемент можно установить фокус

Скопировать ссылку «Не на каждый элемент можно установить фокус» Скопировано

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

В спецификации HTML описаны все критерии, которые делают элемент доступным для фокуса. Мы же разберём самые важные.

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

Если у любого из этих элементов установить атрибут disabled , то элемент перестаёт быть доступным для фокуса.

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 Если нужно установить фокус на элемент сразу после загрузки страницы, то лучше добавить атрибут autofocus прямо в вёрстку. Браузер установит фокус на элемент самостоятельно:

   Your name:  Email: Подать заявку  form action="/apply" method="POST"> label> Your name: input type="text" name="name" autofocus> label> label> Email: input type="email" name="email"> label> button type="submit">Подать заявкуbutton> form>    Скопировать Скопировано Не удалось скопировать   

🛠 Чтобы программно убрать фокус с элемента, нужно либо вызвать метод blur ( ) , либо переместить фокус на другой элемент. Не программно фокус убирается с помощью мыши, как только пользователь нажал на любую кнопку мыши.

🛠 За обводку элемента в фокусе отвечает CSS-свойство outline . Не скрывайте её, если на сайте нет альтернативного способы выделения элементов в фокусе.

Источник