Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Focus events

blur イベントは、要素がフォーカスを失ったときに発生します。このイベントはバブリングしませんが、続いて発生する関連する focusout イベントはバブリングします。

要素は他の要素が選択されるとフォーカスを失います。 また、hiddenのようなフォーカスを許可しないスタイルが適用された場合や、文書から要素が除去された場合もフォーカスを失います。どちらの場合も、フォーカスは body 要素（ビューポート）へ移動します。 なお、フォーカスされた要素が文書から除去された場合には blur は発生しないことに注意してください。

blur の反対は focus イベントであり、こちらは要素がフォーカスを得たときに発生します。

blur イベントはキャンセル不可です。

その他

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
FocusEvent
26
12
24
7
26
7
blur_event

blur イベントは、要素がフォーカスを失ったときに発生します。このイベントはバブリングしませんが、続いて発生する関連する Element/focusout_event イベントはバブリングします。
1
12
24
3.1
18
2
focus_event

focus イベントは、要素がフォーカスを受け取ったときに発生します。このイベントはバブリングしませんが、その後に発生する関連する Element/focusin_event イベントはバブリングします。
1
12
24
3.1
18
2
focusin_event

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

focusout イベントは、要素がフォーカスを失おうとしているときに発生します。このイベントと Element/blur_event との主な違いは、 focusout がバブリングするのに対し blur はしないことです。
1
12
52
5
18
4.2
FocusEvent

FocusEvent() コンストラクターは、新しく作成された FocusEvent オブジェクトを返します。任意で EventTarget オブジェクトを指定することができます。イベントに送信元と送信先の両方がある場合、 relatedTargetの値は、もう一方のターゲットに設定する必要があります。
26
12
24
7
26
7
relatedTarget

FocusEvent.relatedTarget は読み取り専用プロパティで、イベントの種類に応じた副ターゲットを表します。
26
12
24
7
26
7
blur

HTMLElement.blur() メソッドは、現在の要素からキーボードフォーカスを取り除きます。
1
12
1.5
3
18
1
focus

HTMLElement.focus() メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。フォーカスされた要素は、既定でキーボードや同様のイベントを受け取る要素です。
1
12
1.5
3
18
1
focus (options focusVisible parameter)

options.focusVisible`パラメータ
145
145
104
18.4
145
18.4
focus (options preventScroll parameter)

options.preventScroll`パラメータ
64
17
68
15
15.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (24)
実装メモ
  • このイベントのインターフェイスは `FocusEvent` ではなく `Event` である。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (24)
実装メモ
  • このイベントのインターフェイスは `FocusEvent` ではなく `Event` である。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • イベントハンドラ `onfocusin` プロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusin', function() {});`を使用してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • イベントハンドラ `onfocusin` プロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusin', function() {});`を使用してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • イベントハンドラ `onfocusin` プロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusin', function() {});`を使用してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • イベントハンドラ `onfocusin` プロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusin', function() {});`を使用してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • onfocusout`イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusout', function() {});`を使用してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • onfocusout`イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusout', function() {});`を使用してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • onfocusout`イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusout', function() {});`を使用してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • onfocusout`イベントハンドラプロパティはサポートされていません。このイベントをリッスンするには、`element.addEventListener('focusout', function() {});`を使用してください。
注釈 1件
実装メモ
  • ハードウェアキーボードが接続されておらず、ユーザがまだページとインタラクトしていない場合、`<input>` 要素で `focus()` を呼び出しても何の効果もありません（例えば、その要素は `:focus` セレクタにマッチしません）。

基本構文

JAVASCRIPT 
const input = document.querySelector('input');
input.addEventListener('focus', () => {
  input.style.borderColor = 'blue';
});
input.addEventListener('blur', () => {
  input.style.borderColor = '';
});

ライブデモ

Focusevent

Focus / blur event in element. Focusread / loss detect.

プレビュー全画面表示

Focusin / Focusout(baring with)

Focus/blur is baring that, focusin/focusout is baring.

プレビュー全画面表示

CSS :focus-visible

ki-bo-doperation time. onlyfocusring display CSS pseudoclass.

プレビュー全画面表示

実務での使いどころ

  • Focus events の活用

    blur イベントは、要素がフォーカスを失ったときに発生します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク