Событие onblur
Пример
Выполнить JavaScript, когда пользователь покидает поле ввода:
<input type="text" onblur="myFunction()">
Попробуйте сами »
Определение и использование
Событие onblur
происходит, когда элемент теряет фокус.
Событие onblur
часто используется в полях ввода.
Событие onblur
часто используется при проверке формы (когда пользователь покидает поле формы).
События на основе фокуса
Событие | Описание | Пузыри |
---|---|---|
focus | Элемент получает фокус | Нет |
blur | Элемент теряет фокус | Нет |
focusin | Элемент получает фокус | Да |
focusout | Элемент теряет фокус | Да |
Синтаксис
В JavaScript с помощью метода addEventListener():
object.addEventListener("blur", myScript);
Попробуйте сами »
Технические детали
Пузыри: | Нет |
---|---|
Отменяемый: | Нет |
Тип события: | Событие Фокус |
Поддержка HTML тег: | ВСЕ элементы HTML, КРОМЕ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title> |
DOM Версия: | События уровня 2 |
Поддержка браузера
Событие onblur
является функцией DOM уровня 2 (2001 г.)
Он полностью поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Да | 9-11 | Да | Да | Да | Да |
Ещё примеры
Пример
Использовать атрибутов onfocus и onblur:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Попробуйте сами »
Пример
Делегировать событий: использование событий focus и blur :
Установить useCapture параметру addEventListener() значение true:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
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 = "";
}
</script>
Попробуйте сами »
Пример
Делегировать событий: использование событий focusing и focusout:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
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 = "";
}
</script>
Попробуйте сами »