Рекомендации по курсу:

События DOM FocusEvent

Событие onfocusin

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

Хотя Firefox не поддерживает событие onfocusin, вы можете определить, является ли фокус у подэлемента, используя捕获 листенер событие onfocus (с помощью опционального параметра useCapture метода addEventListener()). Основное различие заключается в том, что событие onfocus не бубblemaking. Поэтому, если вы хотите узнать, фокус ли у элемента или его подэлемента, вы должны использовать событие onfocusin.Событие onfocusin возникает, когда элемент готов получить фокус. Событие onfocusСобытие onfocusin подобно

Хотя Firefox не поддерживает событие onfocusin, вы можете определить, является ли фокус у подэлемента, используя捕获 листенер событие onfocus (с помощью опционального параметра useCapture метода addEventListener()). Основное различие заключается в том, что событие onfocus не бубblemaking. Поэтому, если вы хотите узнать, фокус ли у элемента или его подэлемента, вы должны использовать событие onfocusin..

Хотя Firefox не поддерживает событие onfocusin, вы можете определить, является ли фокус у подэлемента, используя捕获 листенер событие onfocus (с помощью опционального параметра useCapture метода addEventListener()). Основное различие заключается в том, что событие onfocus не бубblemaking. Поэтому, если вы хотите узнать, фокус ли у элемента или его подэлемента, вы должны использовать событие onfocusin.Совет: Событие onfocusoutСобытие onfocusin с

Противоположное.

Пример

Пример 1

Запуск JavaScript при приближении ввода поля фокуса:

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

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

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

Грамматика

В HTML:< element.addEventListener("focusin",onfocusin="

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

">

В JavaScript, используя метод addEventListener():В JavaScript (может не работать в Chrome, Safari и Opera 15+):.addEventListener("focusin",.onfocusin = function(){

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

};

В JavaScript, используя метод addEventListener():object .addEventListener("focusin",myScript

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

Поддержка); Internet Explorer 8 или более ранние версии не поддерживаютМетод addEventListener()

.

Технические детали 52.0
Бубblemaking: Может быть отменено:
Не поддерживается: FocusEvent
Поддерживаемые элементы HTML: Все элементы HTML, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> и <title>
DOM 版本： Версия DOM:

Уровень 2 событий

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает это событие. Событие Chrome IE Firefox Safari
Opera 52.0 52.0 onfocusin 52.0 52.0

ПоддержкаКомментарий:

Более сложные примеры

Пример 2

Использование событий "onfocusin" и "onfocusout":

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

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

Пример 3

Обработка событий: установите параметр useCapture в addEventListener() в true (для focus и 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>

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

Пример 4

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

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

События DOM FocusEvent