пример
Выполнение JavaScript, когда поле ввода собирается получить фокус:
<input type="text"
onfocusin="myFunction()"> Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Onfocusin событие происходит, когда элемент собирается получить фокус.
Совет: onfocusin событие похоже на OnFocus событие. Основное отличие заключается в том, что событие OnFocus не пузырь. Поэтому, если вы хотите, чтобы выяснить, получает ли элемент или его ребенок в центре внимания, вы должны использовать onfocusin событие.
Совет: Хотя Firefox не поддерживает событие onfocusin, вы можете выяснить , получает ли ребенок элемента фокус или нет, с помощью захвата слушателя для OnFocus события ( с помощью дополнительного параметра useCapture в addEventListener() метод).
Tip: onfocusin событие является противоположностью onfocusout события.
Поддержка браузеров
| Мероприятие | |||||
|---|---|---|---|---|---|
| onfocusin | да | да | Не поддерживается | да | да |
Примечание: onfocusin событие не может работать , как ожидается , в 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 .onfocusin=function(){ Попробуй сам " В JavaScript, используя addEventListener() метод:
object .addEventListener("focusin", 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