onblur プロパティは blur イベントのオブジェクトのイベントハンドラーを表します。Element、Document、Window で利用できます。
構文
element.onblur = function;
functionは、接尾辞 () や引数のないユーザーが定義関数、または無名関数で宣言された関数です。例えば、以下のように使われます。
element.onblur = function() { alert("onblur event detected!"); };
例
<html>
<head>
<title>onblur イベントコード例</title>
<script type="text/javascript">
var elem = null;
function initElement()
{
elem = document.getElementById("foo");
// NOTE: doEvent(); または doEvent(param); はここでは動作しません
// 関数呼び出しではなく、関数の名前を参照する必要があります。
elem.onblur = doEvent;
};
function doEvent()
{
elem.value = 'Bye-Bye';
alert("onblur イベントが検出されました!")
}
</script>
<style type="text/css">
<!--
#foo {
border: solid blue 2px;
}
-->
</style>
</head>
<body onload="initElement();">
<form>
<input type="text" id="foo" value="Hello!" />
</form>
<p>上記の要素をクリックして focus イベントを付与してください。その次に、要素の範囲外をクリックしてください。<br /> ナビゲーションバーからページをリロードしてください。</p>
</body>
</html>
注記
blur イベントは要素が focus イベントを失った時に発生されます。
ほとんどの HTML要素が blur イベントを受け取る MSIE--in と対照的に、Gecko ブラウザーではほぼすべての要素で blur イベントは発生しません。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard onblur の定義 |
現行の標準 |
Browser Compatibility
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | ? | ? | ? | ? |
| 機能 | Android | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? | ? | ? | ? | ? |