Element: focusin event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

The focusin event fires when an element has received focus, after the focus event. The two events differ in that focusin bubbles, while focus does not.

The opposite of focusin is the focusout event, which fires when the element has lost focus.

The focusin event is not cancelable.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("focusin", (event) => { })

onfocusin = (event) => { }

Event type

A FocusEvent. Inherits from UIEvent and Event.

Event properties

This interface also inherits properties from its parent UIEvent, and indirectly from Event.

FocusEvent.relatedTarget: The element losing focus, if any.

Examples

Live example

HTML

html

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</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
UI Events # event-type-focusin

Note: The UI Events specification describes an order of focus events that's different from what current browsers implement.

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`focusin` event	Chrome – Partial support Chrome 1 (Release date: 2008-12-11) footnote Partial support footnote The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.	Edge – Partial support Edge 12 (Release date: 2015-07-29) footnote Partial support footnote The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.	Firefox – Partial support Firefox 52 (Release date: 2017-03-07) footnote Partial support footnote The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.	Opera – Full support Opera 11.6 (Release date: 2011-12-06) footnote Full support	Safari – Full support Safari 5 (Release date: 2010-06-07) footnote Full support	Chrome Android – Partial support Chrome Android 18 (Release date: 2012-06-27) footnote Partial support footnote The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.	Firefox for Android – Partial support Firefox for Android 52 (Release date: 2017-03-07) footnote Partial support footnote The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.	Opera Android – Full support Opera Android 12.1 (Release date: 2012-10-09) footnote Full support	Safari on iOS – Full support Safari on iOS 4.2 (Release date: 2010-11-22) footnote Full support	Samsung Internet – Partial support Samsung Internet 1 (Release date: 2013-04-27) footnote Partial support footnote The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.	WebView Android – Partial support WebView Android 4.4 (Release date: 2013-12-09) footnote Partial support footnote The `onfocusin` event handler property is not supported. To listen to this event, use `element.addEventListener('focusin', function() {});`.	WebView on iOS – Full support WebView on iOS 4.2 (Release date: 2010-11-22) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support
Partial support: Partial support

Element: focusin event

HTML

JavaScript

Result

Legend