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