W3cubDocs

/Web APIs

Element: focusin event

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().

js

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

Event type

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

js

const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});

Result

Specifications

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 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–2023 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