Element: focusin event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
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.
js
addEventListener("focusin", (event) => { })
onfocusin = (event) => { }
Event type
A FocusEvent. Inherits from UIEvent and Event.
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
| 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
See also
- Related events:
blur,focus,focusout - Focusing: focus/blur