Как убрать focus с input

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

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

Одна из них – когда посетитель кликает куда-то ещё. Но и 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 :

Один Ноль Два Минус один

Как убрать фокус с input после успешной отправки формы?

Когда я нажимаю на input то лэйбл поднимается, когда нажимаю за пределы input то label опускается. Когда успешно отсылаю сообщение, то поля становятся внутри пустыми , а label обратно не возвращается. document.addEventListener alert после отправки выводит , так что на успешную отправку формы реагирует.

Отслеживать
задан 13 дек 2019 в 13:08
Nikita Kurilovic Nikita Kurilovic
129 7 7 бронзовых знаков
Такие вещи лучше делать на css, а не на js. Но в целом попробуйте jQuery(‘input’).trigger(‘blur’) .
13 дек 2019 в 13:26
не помогло. Я знаю , что на css , но мне надо было на js
16 дек 2019 в 13:25

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

label.animate(< 'font-size': '17px', 'top': '10px', >);

Отслеживать
ответ дан 20 дек 2019 в 14:46
Stupid_Pink_Pony Stupid_Pink_Pony
439 4 4 серебряных знака 7 7 бронзовых знаков
да я уже решил проблему. Я взял по классу .input-label и ему прописал нужные стили после отправки
20 дек 2019 в 15:14

javascript
jquery

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Метод blur

Давайте по клику на одну кнопку установим фокус на инпуте, а по клику на другую — уберем его:

let input = document.querySelector(‘#input’); let focus = document.querySelector(‘#focus’); let blur = document.querySelector(‘#blur’); // По клику на кнопку focus установим фокус инпуту: focus.addEventListener(‘click’, function() < input.focus(); >); // По клику на кнопку blur уберем фокус с инпута: blur.addEventListener(‘click’, function() < input.blur(); >);

Смотрите также

метод focus ,
с помощью которого можно установить фокус на элементе

Как убрать фокус с инпута?

Подскажите метод чтобы убрать фокус с элемента? Например есть фокус на input и фокус пропадает когда происходит движение мышки.

Вопрос задан более трёх лет назад
24335 просмотров

Комментировать
Решения вопроса 1
Stalker_RED @Stalker_RED
element.blur()
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 4

JimmiJanger

Тимофей Михайлов @JimmiJanger
Любопытный активист, под маской ленивого нуба.
Мне кажется, более более благородный метод, через CSS

input

Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Этот метод хорош только в случае пофигизма на доступность контента 🙂

KorniloFF

Павел Корнилов @KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
Ответ написан более трёх лет назад

hahenty

это очень нервная фигня.

KorniloFF

Павел Корнилов @KorniloFF Куратор тега JavaScript

Сергей Сергей: почему? Думаешь, что человек, у которого будет пропадать фокус, будет нервничать?
Возможно, но я лишь отвечал на вопрос, и так я немного масла добавил.
Точным ответом был бы

Вот, где нервы! =)