Javascript событие снятия фокуса

onfocusout Event

Call a function when an input field is about to lose focus:

More «Try it Yourself» examples below.

Description

The onfocusout event occurs when an element loses focus.

The onfocusout event is often used on input fields.

The onfocosout event is often used with form validation (when the user leaves a form field).

Focus Based Events

See Also:

Syntax

In JavaScript, using the addEventListener() method:

Technical Details

Bubbles:	Yes
Cancelable:	No
Event type:	FocusEvent
HTML tags:	ALL HTML elements, EXCEPT: , , , , , , , , , , and
DOM Version:	Level 2 Events

Browser Support

onfocusout is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

More Examples

Example

Using onfocus and onblur:

Example

Clear input field on focus:

Example

Event delegation: using focus and blur events:

Set useCapture parameter of addEventListener() to true:

let x = document.getElementById(«myForm»);
x.addEventListener(«focus», myFocusFunction, true);
x.addEventListener(«blur», myBlurFunction, true);

function myFocusFunction() document.getElementById(«myInput»).style.backgroundColor = «yellow»;
>

function myBlurFunction() document.getElementById(«myInput»).style.backgroundColor = «»;
>

Example

Event delegation: using focusin and focusout events:

let x = document.getElementById(«myForm»);
x.addEventListener(«focusin», myFocusFunction);
x.addEventListener(«focusout», myBlurFunction);

function myFocusFunction() document.getElementById(«myInput»).style.backgroundColor = «yellow»;
>

function myBlurFunction() document.getElementById(«myInput»).style.backgroundColor = «»;
>

Источник

Element: focusout event

The focusout event fires when an element has lost focus, after the blur event. The two events differ in that focusout bubbles, while blur does not.

The opposite of focusout is the focusin event, which fires when the element has received focus.

The focusout event is not cancelable.

Syntax

Use the event name in methods like addEventListener() .

addEventListener("focusout", (event) => >); 

Event type

Event properties

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

Examples

Live 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 form = document.getElementById("form"); form.addEventListener("focusin", (event) =>  event.target.style.background = "pink"; >); form.addEventListener("focusout", (event) =>  event.target.style.background = ""; >); 

Result

Specifications

Note: The UI Events specification describes an order of focus events that’s different from what current browsers implement.

Browser compatibility

See also

Found a content problem with this page?

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

Your blueprint for a better internet.

Источник

Управление фокусировкой

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

DOCTYPE html> html> head> title>Уроки по JavaScripttitle> head> body> form name="reg"> p>input name="user" value="" /> p>input name="sex" type="radio" checked />М input name="sex" type="radio" />Ж p>Город: select name="city"> option>Москваoption> option>Санкт-Петербургoption> option>Тверьoption> select> p>Согласие input name="agree" type="checkbox" /> p>textarea name="about" rows="10" cols="30">О себеtextarea> p>input type="submit" name="submit"> form> script> script> body> html>

let frm = document.forms[0]; frm.user.onfocus = function(event) { console.log("получение фокуса"); }; frm.user.onblur = function(event) { console.log("потеря фокуса"); };

Теперь, щелкая по элементу, появится сообщение «получение фокуса», то есть, сработало событие focus. А при переходе к другому элементу появляется событие «потеря фокуса», то есть, сработало событие blur. Когда могут понадобиться такие события? Например, для проверки корректности ввода данных в поле ввода. Для простоты положим, что имя пользователя не должно содержать символа #. Такую проверку можно сделать так:

frm.user.onblur = function(event) { if(frm.user.value.includes('#')) frm.user.classList.add('error'); else frm.user.classList.remove('error'); };

То есть, когда в поле ввода содержится символ #, то оно принимает красный фон. Соответственно стиль можно прописать так:

style> .error { background: #CC0000; } style>

frm.user.classList.remove('error');

Однако, обратите внимание, стандарты HTML 5 и выше позволяют в полях ввода прописывать атрибуты required, pattern для автоматической проверки корректности введенных данных. Так что скрипт следует использовать, только если недостаточно встроенных способов валидации данных. Также следует иметь в виду, что события focus и blur не всплывают, то есть, мы не можем перехватить их обработчиком элемента более высокого уровня в иерархии DOM-дерева. Например, если поставить обработчик onfocus на форму:

frm.onfocus = function() { console.log("form: focus"); }

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

frm.addEventListener("focus", function() { console.log("form: focus"); }, true);

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

frm.addEventListener("focusin", function() { console.log("form: focusin"); });

и при обновлении документа мы увидим фокусировку на теге textarea. Аналогично работает второй метод. Но здесь есть несколько тонких моментов. Во-первых, эти методы могут не работать в браузерах Firefox. Во-вторых, бывают случаи, когда фокусировка с элемента будет сниматься автоматически. Например, при появлении модальных окон, вызванных методами: alert(), prompt(), confirm() Так что полагаться целиком на методы focus и blur не стоит и в практике программирования ими стараются не пользоваться. Вместо этого лучше полагаться на события focus и blur и реализовывать логику через их обработчики. Или же, используя псевдокласс :focus, определять стили сфокусированного элемента. Работая с событиями focus и blur, следует иметь в виду, что далеко не все элементы HTML-документа по умолчанию поддерживают фокусировку. Например, элементы: div, p, table, span, img и т.п. Добавим div на нашу страницу:

div id="block" style="height:50px; background: #777">div>

block.onfocus = function(event) { console.log("focus"); }; block.onblur = function(event) { console.log("blur"); };

Кликая по блоку div мы не увидим никаких сообщений в консоли. Это, как раз, и говорит о том, что данный элемент не имеет фокусировки. Но ее можно включить, если прописать вот такой атрибут: tabindex=»1″ Теперь, при щелчке мыши по блоку div, будут срабатывать эти два события. Что это за атрибут tabindex? Он указывает в какой последовательности следует переключать фокусы между элементами, при нажатии на клавишу Tab. Так что, если мы какой-то элемент включаем в эту последовательность, то он должен обладать фокусировкой. И браузеры ее включают, даже если, ранее элемент не обладал таким свойством. Причем, это свойство можно установить и непосредственно в скрипте, используя свойство tabIndex:

• tabindex=»0″ располагает элемент на уровне с другими элементами без атрибута tabindex, но обладающих фокусировкой;
• tabindex=»-1″ позволяет фокусироваться на элементе только программно.

let active = document.activeElement; console.log(active);

Источник

Фокусировка: 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 :

Источник