Element: blur イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
blur イベントは、要素がフォーカスを失ったときに発生します。このイベントはバブリングしませんが、続いて発生する関連する focusout イベントはバブリングします。
要素は他の要素が選択されるとフォーカスを失います。 また、hiddenのようなフォーカスを許可しないスタイルが適用された場合や、文書から要素が除去された場合もフォーカスを失います。どちらの場合も、フォーカスは body 要素（ビューポート）へ移動します。 なお、フォーカスされた要素が文書から除去された場合には blur は発生しないことに注意してください。
blur の反対は focus イベントであり、こちらは要素がフォーカスを得たときに発生します。
blur イベントはキャンセル不可です。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("blur", (event) => {}); onblur = (event) => {}; イベント型
FocusEvent です。 Event を継承しています。
イベントプロパティ
親である UIEvent および間接的に Event から継承したプロパティもあります。
-
もしあれば、フォーカスを受け取った要素。
例
簡単な例
HTML
<form id="form"> <label> テキストを入力: <input type="text" placeholder="テキストを入力" /> </label> <label> パスワード: <input type="password" placeholder="password" /> </label> </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 = ""; }); 結果
イベント委譲
このイベントのイベント委譲を実装する方法は 2 つあります。focusout イベントを使用するか、addEventListener() の useCapture 引数に true を設定するかです。
HTML
<form id="form"> <label> テキストを入力: <input type="text" placeholder="テキストを入力" /> </label> <label> パスワード: <input type="password" placeholder="password" /> </label> </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, ); 結果
仕様書
| Specification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
ブラウザーの互換性
このイベントが処理されている間、Document.activeElement の値はブラウザーによって異なります (Firefox バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の body を設定します。
関連情報
HTMLElement.blur()メソッド- 関連イベント:
focus,focusin,focusout Windowを対象としたこのイベント:blurイベント- Focusing: focus/blur