Element: focusin event

Limited availability

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

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 = "";
});