HTML: изучение событий onblur и onfocus

HTML предоставляет различные атрибуты событий, которые позволяют добавлять интерактивность вашим веб-страницам. Двумя такими атрибутами являются onblur и onfocus. В этой статье мы углубимся в эти события и рассмотрим, как их можно использовать для улучшения пользовательского опыта. Попутно мы предоставим примеры кода, чтобы продемонстрировать их использование. Итак, начнём!

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

Вот пример использования события onblur с JavaScript:

<input type="text" onblur="validateInput(this.value)" />

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

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

Давайте рассмотрим пример, демонстрирующий использование события onfocus:

<input type="text" onfocus="showHint('Enter your name')" />

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

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

Вот пример, демонстрирующий совместное использование onblur и onfocus:

<input type="password" onfocus="showHint('Enter your password')" onblur="validatePassword(this.value)" />

В приведенном выше фрагменте кода событие onfocus отображает подсказку, когда пользователь фокусирует внимание на поле пароля, а событие onblur запускает функцию validatePasswordдля выполнения проверки, как только пользователь покидает поле.