The focusout
event fires when an element is about to lose focus. The main difference between this event and blur
is that focusout
bubbles while blur
does not.
The opposite of focusout
is focusin
.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | FocusEvent |
Event handler property | onfocusout |
Sync / Async | Sync |
Composed | Yes |
Examples
Live example
HTML
<form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form>
JavaScript
const form = document.getElementById('form'); form.addEventListener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addEventListener('focusout', (event) => { event.target.style.background = ''; });
Result
Specifications
Specification | Status | Comment |
---|---|---|
UI Events | Working Draft | Added info that this event is composed. |
Document Object Model (DOM) Level 3 Events Specification | Obsolete | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
focusout event | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 52 | IE Full support 9 | Opera Full support 11.6 | Safari Full support 5 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 52 | Opera Android Full support 12.1 | Safari iOS Full support 4.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support