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 July 2015.

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

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

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

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

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("blur", (event) => {});

onblur = (event) => {};

イベント型

FocusEvent です。 Event を継承しています。

Event UIEvent FocusEvent

イベントプロパティ

親である UIEvent および間接的に Event から継承したプロパティもあります。

FocusEvent.relatedTarget

もしあれば、フォーカスを受け取った要素。

例

簡単な例

HTML

html
<form id="form">
  <label>
    テキストを入力:
    <input type="text" placeholder="テキストを入力" />
  </label>
  <label>
    パスワード:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

js
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

html
<form id="form">
  <label>
    テキストを入力:
    <input type="text" placeholder="テキストを入力" />
  </label>
  <label>
    パスワード:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

js
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 Standard
# handler-onblur

ブラウザーの互換性

BCD tables only load in the browser

このイベントが処理されている間、Document.activeElement の値はブラウザーによって異なります (Firefox バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox と Chrome ではふつう、文書の body を設定します。

関連情報