The focusin
event fires when an element is about to receive focus. The main difference between this event and focus
is that focusin
bubbles while focus
does not.
The opposite of focusin
is focusout
.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | FocusEvent |
Event handler property | onfocusin |
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
focusin event | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 52 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 52 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support