GlobalEventHandlers.onblur

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 の定義		 現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onblurChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

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

関連項目