Element: focusin event

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
focusin_event
1
12
52
9
11.6
5
≤37
18
52
12.1
4.2
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event