HTML атрибут событий `onfocus`

Значение и применение

Атрибут событий onfocus позволяет задать срабатывание скрипта, когда элемент получает фокус.

Поддержка браузерами

Спецификации: uievents, multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Element.focus_event
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
focus event	✓1	✓12	✓24	✓11.6	✓3.1	✓18	✓24	✓12.1	✓2	✓1.0	✓4.4	✓2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

HTML

<element onfocus = "script" >

focus не всплывает. Для делегирования используйте focusin или обработчик с capture: true. Фокус появляется не только по клику, но и при навигации клавиатурой или вызове focus().

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

Получение и потеря фокуса

Нажмите ▶. Перейдите к полю клавишей Tab, затем переведите фокус дальше.

index.html

HTML

<input type="text" name="testInput" id="testInput" />

main.js

JavaScript

function focusFunction() {
    document.getElementById('testInput').style.background = 'khaki'
}
function blurFunction() {
    document.getElementById('testInput').style.background = 'red'
}

document.getElementById('testInput').addEventListener('focus', function () {
    focusFunction()
})
document.getElementById('testInput').addEventListener('blur', function () {
    blurFunction()
})

Отличия HTML 4.01 от HTML 5

Нет.

Где возникает событие

Атрибут можно задавать HTML-элементам, но возникновение события зависит от взаимодействия и состояния элемента. Наличие обработчика само по себе не делает элемент фокусируемым, редактируемым или перетаскиваемым.

HTML атрибут событий onfocus