Element: focus イベント

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

focus の反対は blur です。

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

例

簡単な例

HTML

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

JavaScript

const password = document.querySelector('input[type="password"]');

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

password.addEventListener('blur', (event) => {
  event.target.style.background = '';    
});

結果

イベント委譲

このイベントのイベント委譲を実装する方法は二つあります。 focusout イベントを使用するか、 addEventListener() の useCapture 引数に true を設定するかです。

HTML

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

JavaScript

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

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

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

結果

仕様書

仕様書 状態 備考
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
focus eventChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 24
完全対応 24
未対応 6 — 24
補足
補足 The interface for this event is Event, not FocusEvent.
IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 3.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 24
完全対応 24
未対応 6 — 24
補足
補足 The interface for this event is Event, not FocusEvent.
Opera Android 完全対応 12.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報