Событие onfocusin
Пример
Запустить JavaScript, когда поле ввода вот-вот получит фокус:
<input type="text"
onfocusin="myFunction()">
Попробуйте сами »
Ещё примеры "Попробуйте сами" ниже.
Определение и использование
Событие onfocusin происходит, когда элемент получает фокус.
Событие onfocusin часто используется в полях ввода.
Основанные события фокуса
| Событие | Описание | Пузыри |
|---|---|---|
| focus | Элемент получает фокус | Нет |
| blur | Элемент теряет фокус | Нет |
| focusin | Элемент получает фокус | Да |
| focusout | Элемент теряет фокус | Да |
Синтаксис
В JavaScript, используйте метод addEventListener():
object.addEventListener("focusin", myScript);
Попробуйте сами »
Технические подробности
| Пузыри: | Да |
|---|---|
| Отменяемый: | Нет |
| Тип события: | FocusEvent |
| Поддержка HTML тегов: | Все HTML элементы, КРОМЕ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, и <title> |
| DOM Версия: | События 2 уровня |
Поддержка браузера
Событие onfocusin является функцией DOM уровня 2 (2001 г.).
Он полностью поддерживается во всех браузерах:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Да | 9-11 | Да | Да | Да | Да |
Ещё примеры
Пример
Использование onfocus и onblur:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Попробуйте сами »
Пример
Очистить поле ввода при фокусировке:
<input type="text" onfocus="this.value=''" value="Блабла">
Попробуйте сами »
Пример
Делегирование событий: использование события focus и blur:
Установить useCapture параметру addEventListener() значение true:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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 и focusout:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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>
Попробуйте сами »
