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
A FocusEvent
. Inherits from UIEvent
and Event
.
Event properties
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
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
See also
- Related events:
blur
,focus
,focusout
- Focusing: focus/blur