Событие onblur
Пример
Выполнение JavaScript, когда пользователь покидает поле ввода:
<input type="text" onblur="myFunction()">
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Событие onblur происходит, когда объект теряет фокус.
Событие onblur чаще всего используется с кодом проверки формы (например, когда пользователь покидает поле формы).
Совет: событие onblur противоположно событию onfocus .
Совет: событие onblur похоже на событие onfocusout . Основное отличие состоит в том, что событие onblur не всплывает. Поэтому, если вы хотите узнать, теряет ли фокус элемент или его дочерний элемент, вы можете использовать событие onfocusout. Однако этого можно добиться, используя необязательный параметр useCapture метода addEventListener() для события onblur.
Поддержка браузера
| Event | |||||
|---|---|---|---|---|---|
| onblur | Yes | Yes | Yes | Yes | Yes |
Синтаксис
В HTML:
<element onblur="myScript">
В JavaScript:
object.onblur = function(){myScript};
В JavaScript с помощью метода addEventListener():
object.addEventListener("blur", myScript);
Примечание. Метод addEventListener() не поддерживается в Internet Explorer 8 и более ранних версиях.
Технические детали
| Пузыри: | Нет |
|---|---|
| Отменяемо: | Нет |
| Тип события: | ФокусСобытие |
| Поддерживаемые HTML-теги: | ВСЕ элементы HTML, КРОМЕ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title> |
| Версия ДОМ: | События уровня 2 |
Дополнительные примеры
Пример
Использование «onblur» вместе с событием «onfocus»:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Пример
Делегирование события: установка для параметра useCapture функции addEventListener() значения true:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var 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 (не поддерживается Firefox):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var 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>