Element: focusin event - Web APIs 编辑

The focusin event fires when an element is about to receive focus. The main difference between this event and focus is that focusin bubbles while focus does not.

The opposite of focusin is focusout.

Examples

Live example

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

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

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

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

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Related events: blur, focus, focusout