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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
blur event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

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

関連情報