Element: focusin イベント

focusin イベントは、要素がフォーカスを受け取ろうとしているときに発生します。このイベントと focus との主な違いは、 focusin がバブリングを行うのに対し focus は行わないことです。

focusin の反対は focusout です。

バブリング あり
キャンセル可能 いいえ
インターフェイス FocusEvent
イベントハンドラープロパティ onfocusin
同期 / 非同期 同期
Composed はい

ライブデモ

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 = '';    
});

結果

仕様書

仕様書 状態 備考
UI Events 草案 Added info that this event is composed.
Document Object Model (DOM) Level 3 Events Specification 廃止された 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
focusin eventChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 52IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 5WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 52Opera Android 完全対応 12.1Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報