пример
Выполнение JavaScript, когда поле ввода собирается терять фокус:
<input type="text"
onfocusout="myFunction()"> Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Onfocusout событие происходит, когда элемент собирается потерять фокус.
Совет: onfocusout событие похоже на ONBLUR событие. Основное отличие состоит в том, что ONBLUR событие не пузырь. Поэтому, если вы хотите, чтобы выяснить, теряет ли элемент или его ребенок фокус, вы должны использовать onfocusout событие.
Совет: Хотя Firefox не поддерживает onfocusout события, вы можете выяснить , теряет ли ребенок элемента фокус или нет, с помощью захвата слушателя для ONBLUR события ( с помощью дополнительного параметра useCapture в addEventListener() метода).
Tip: onfocusout событие является противоположностью onfocusin события.
Поддержка браузеров
| Мероприятие | |||||
|---|---|---|---|---|---|
| onfocusout | да | да | Не поддерживается | да | да |
Примечание: onfocusout событие не может работать , как ожидается , в Chrome, Safari и Opera 15+ с использованием синтаксиса JavaScript HTML DOM. Тем не менее, он должен работать как атрибут HTML и с помощью addEventListener() метод.
Синтаксис
В HTML:
В JavaScript (may not work as expected in Chrome, Safari and Opera 15+) образом (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusout=function(){ Попробуй сам " В JavaScript, используя addEventListener() метод:
object .addEventListener("focusout", myScript );
Попробуй сам " Примечание: addEventListener() метод не поддерживается в Internet Explorer 8 и более ранних версий.
Технические подробности
| Пузыри: | да |
|---|---|
| аннулированию: | нет |
| Тип события: | FocusEvent |
| Поддерживаемые HTML-теги: | ВСЕ HTML элементы, КРОМЕ: <основание>, <БДО> <br>, <HEAD>, <HTML>, <IFRAME>, <META>, <PARAM>, <скрипт>, <стиль> и <title> |
| DOM Версия: | Уровень 2 События |
Еще примеры
пример
Использование "onfocusin" вместе с "onfocusout" событие:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Попробуй сам " пример
Делегация события: настройка параметра useCapture из addEventListener() к истинному (for focus and blur) :
<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>
Попробуй сам " <Объект Event