Web/API/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

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`focusin` 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