Событие onfocusin
Пример
Выполните JavaScript, когда поле ввода вот-вот получит фокус:
<input type="text"
onfocusin="myFunction()">
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Событие onfocusin происходит, когда элемент вот-вот получит фокус.
Совет: событие onfocusin аналогично событию onfocus . Основное отличие состоит в том, что событие onfocus не всплывает. Поэтому, если вы хотите узнать, получает ли фокус элемент или его дочерний элемент, вы должны использовать событие onfocusin.
Совет: событие onfocusin противоположно событию onfocusout .
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую событие.
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Примечание. Событие onfocusin может не работать должным образом в Chrome, Safari и Opera 15+, использующих синтаксис JavaScript HTML DOM. Однако он должен работать как атрибут HTML и с использованием метода addEventListener() (см. примеры синтаксиса ниже).
Синтаксис
В HTML:
<element onfocusin="myScript">
В JavaScript (может не работать должным образом в Chrome, Safari и Opera 15+):
object.onfocusin = function(){myScript};
В JavaScript с помощью метода addEventListener():
object.addEventListener("focusin", 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>