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

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

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

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

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

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

Показать браузеры
Совместимостьapi.Element.blur_event
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
blur event✓1✓12✓24✓11.6✓3.1✓18✓24✓12.1✓2✓1.0✓4.4✓2

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

Синтаксис

HTML
<element onblur =  "script" >

blur не всплывает. Для делегирования используйте focusout или обработчик с capture: true. event.relatedTarget может указывать новый фокусируемый элемент, но бывает null.

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

Верхний регистр при потере фокуса

Нажмите ▶. Введите текст и переведите фокус на другой элемент.

index.html
HTML
<input type="text" name="cardname" id="cardname" />
main.js
JavaScript
function testFunction() {
    var z = document.getElementById('cardname')
    z.value = z.value.toUpperCase()
}

document.getElementById('cardname').addEventListener('blur', function () {
    testFunction()
})

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

Нажмите ▶. Введите текст и переведите фокус на другой элемент.

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-элементам, но возникновение события зависит от взаимодействия и состояния элемента. Наличие обработчика само по себе не делает элемент фокусируемым, редактируемым или перетаскиваемым.