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