пример
Выполнение JavaScript, когда поле ввода получает фокус:
<input type="text"
onfocus="myFunction()"> Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Событие OnFocus происходит, когда элемент получает фокус.
Событие OnFocus чаще всего используется с <ввод>, <SELECT> и <a> .
Tip: Событие OnFocus является противоположностью ONBLUR события.
Совет: OnFocus событие похоже на onfocusin события. Основное отличие заключается в том, что событие OnFocus не пузырь. Поэтому, если вы хотите, чтобы выяснить, получает ли элемент или его ребенок в центре внимания, вы могли бы использовать onfocusin событие. Тем не менее, вы можете достичь этого, используя дополнительный параметр useCapture в addEventListener() метод для события OnFocus.
Поддержка браузеров
| Мероприятие | |||||
|---|---|---|---|---|---|
| onfocus | да | да | да | да | да |
Синтаксис
В HTML:
В JavaScript:
object .onfocus=function(){ Попробуй сам " В JavaScript, используя addEventListener() метод:
object .addEventListener("focus", myScript );
Попробуй сам " Примечание: addEventListener() метод не поддерживается в Internet Explorer 8 и более ранних версий.
Технические подробности
| Пузыри: | нет |
|---|---|
| аннулированию: | нет |
| Тип события: | FocusEvent |
| Поддерживаемые HTML-теги: | ВСЕ HTML элементы, КРОМЕ: <основание>, <БДО> <br>, <HEAD>, <HTML>, <IFRAME>, <META>, <PARAM>, <скрипт>, <стиль> и <title> |
| DOM Версия: | Уровень 2 События |
Еще примеры
пример
Использование "onfocus" вместе с "onblur" событие:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Попробуй сам " пример
Делегация события: настройка параметра useCapture из addEventListener() к истине:
<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