GlobalEventHandlers.onblur - Web API

GlobalEventHandlers ミックスインの onblur プロパティは、blur イベントを処理する EventHandler です。これは、Element、Document、Window 上で利用できます。

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

補足: onblur の反対が onfocus です。

構文

target.onblur = functionRef;

値

functionRef は関数名または関数式です。この関数は、FocusEvent オブジェクトとその 1 個の引数を受け取ります。

例

この例は、onblur および onfocus を使用して <input> 要素内のテキストを変更します。

HTML

<input type="text" value="ここをクリック">

JavaScript

let input = document.querySelector('input');

input.onblur = inputBlur;
input.onfocus = inputFocus;

function inputBlur() {
  input.value = 'Focus has been lost';
}

function inputFocus() {
  input.value = 'Focus is here';
}

実行結果

フォームフィールドの内側と外側をクリックしてみてください。それに応じてコンテンツが変化するか観察してください。

仕様

仕様書	策定状況	備考
HTML Living Standard onblur の定義	現行の標準

ブラウザー実装状況

BCD tables only load in the browser

IE とは対称的に、blur イベントを受け取るほとんどすべての要素では、Gecko ブラウザー上のほとんどすべての要素において、このイベントが動作しません。