The focus event fires when an element has received focus. The event does not bubble, but the related focusin event that follows does bubble.
The opposite of focus is the blur event, which fires when the element has lost focus.
The focus event is not cancelable.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("focus", (event) => {});
onfocus = (event) => {};
A Event.
This interface also inherits properties from its parent Event.
The element losing focus, if any.
<form id="form">
<label>
Some text:
<input type="text" placeholder="text input" />
</label>
<label>
Password:
<input type="password" placeholder="password" />
</label>
</form>
const password = document.querySelector('input[type="password"]');
password.addEventListener("focus", (event) => {
event.target.style.background = "pink";
});
password.addEventListener("blur", (event) => {
event.target.style.background = "";
});
| Specification |
|---|
| HTML # handler-onfocus |
BCD tables only load in the browser
HTMLElement.focus() methodfocusoutWindow targets: focus event