onblurイベント

DOM イベント FocusEvent

定義と用法

onblurイベントは、オブジェクトが焦点を失ったときに発生します。

onblurイベントは、最もよくフォームの検証コード（例えば、ユーザーがフォームのフィールドから離れたとき）と一緒に使用されます。

ヒント： onblurイベントと onfocus イベント逆です。

ヒント： onblurイベントは似ています onfocusout イベント。主な違いは、onblurイベントがバブルアップしないことです。したがって、要素やその子要素が焦点を失ったかどうかを確認したい場合は、onfocusoutイベントを使用できます。ただし、onblurイベントの addEventListener()メソッドのuseCaptureパラメータ（オプション）でこれを実現します。

例

ユーザーが入力フィールドから離れたときにJavaScriptを実行します：

<input type="text" onblur="myFunction()">

自分で試してみる

ページの下部にTIYインスタンスが多くあります。

文法

HTMLで：

<element onblur="myScript">

自分で試してみる

JavaScriptで：

object.onblur = function(){}myScript};

自分で試してみる

JavaScriptでaddEventListener()メソッドを使用：

object.addEventListener("blur", myScript);

自分で試してみる

注：Internet Explorer 8以前のバージョンではサポートしていません addEventListener()メソッド。

技術的詳細

バブル： サポートしていません
キャンセル可能： サポートしていません
イベントタイプ： FocusEvent
サポートするHTMLタグ： すべてのHTML要素、以下のものを除いて：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>および<title>
DOMバージョン： レベル2イベント

ブラウザのサポート

イベント Chrome IE Firefox Safari Opera
onblur サポート サポート サポート サポート サポート

さらに例

例

"onblur"と"onfocus"イベントを一緒に使用：

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

自分で試してみる

例

イベントデリゲーション：addEventListener()のuseCaptureパラメータをtrueに設定：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

自分で試してみる

例

イベントデリゲーション：focusin イベントを使用（Firefox はサポートしていません）：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

自分で試してみる

DOM イベント FocusEvent