Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event below:

Element: focus event - Web APIs

Baseline Widely available

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) => { }

This interface also inherits properties from its parent UIEvent, and indirectly from 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 = "";
});

There are two ways of implementing event delegation for this event: by using the focusin event, or by setting the useCapture parameter of addEventListener() to true.

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

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

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

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

• The HTMLElement.focus() method
• Related events: blur, focusin, focusout
• This event on Window targets: focus event
• Focusing: focus/blur

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3