Событие onblur

События DOM FocusEvent

Определение и использование

Событие onblur возникает при потере фокуса объектом.

Событие onblur часто используется вместе с кодом проверки форм (например, когда пользователь выходит из поля формы).

Подсказка: Событие onblur подобно Событие onfocusнапротив.

Подсказка: Событие onblur похоже на Событие onfocusout.Основное различие заключается в том, что событие onblur не бубнит. Метод addEventListener()параметр useCapture (по умолчанию) для этого.

Пример

Запуск JavaScript, когда пользователь выходит из поля ввода:

<input type="text" onblur="myFunction()">

Попробуйте сами

Ниже страницы есть больше примеров TIY.

грамматика

В HTML:

<element onblur="myScript">

Попробуйте сами

В JavaScript:

объект.onblur = function(){}myScript};

Попробуйте сами

В JavaScript, используйте метод addEventListener():

объект.addEventListener("blur", myScript);

Попробуйте сами

Комментарий:Internet Explorer 8 и более ранние версии не поддерживают Метод addEventListener().

Технические детали

Бубblem: Не поддерживается
Отменяемое: Не поддерживается
Тип события: FocusEvent
Поддерживаемые HTML-теги: Все HTML-элементы, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title>
Версия DOM: Уровень 2 событий

Поддержка браузеров

Событие Chrome IE Firefox Safari Opera
onblur Поддержка Поддержка Поддержка Поддержка Поддержка

Более примеров

Пример

Использование событий "onblur" и "onfocus" вместе:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Попробуйте сами

Пример

Событийная деlegation: установите параметр 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>

Попробуйте сами

Пример

Событийная деlegation: использование события 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>

Попробуйте сами

События DOM FocusEvent