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.

This 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 Event.

Event properties

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

FocusEvent.relatedTarget: An EventTarget representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to null for security reasons.

Examples

Live example

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

Browser compatibility

BCD tables only load in the browser