onfocusoutイベント
例
入力フィールドがフォーカスを失いかけているときにJavaScriptを実行します。
<input type="text"
onfocusout="myFunction()">
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
onfocusoutイベントは、要素がフォーカスを失いかけているときに発生します。
ヒント： onfocusoutイベントは、 onblurイベントに似ています。主な違いは、onblurイベントがバブルしないことです。したがって、要素またはその子がフォーカスを失ったかどうかを確認したい場合は、onfocusoutイベントを使用する必要があります。
ヒント： onfocusoutイベントは、onfocusinイベントの反対 です。
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
注： onfocusoutイベントは、JavaScript HTML DOM構文を使用するChrome、Safari、およびOpera15以降では期待どおりに機能しない場合があります。ただし、HTML属性として、addEventListener（）メソッドを使用して機能する必要があります（以下の構文例を参照）。
構文
HTMLの場合：
<element onfocusout="myScript">
JavaScriptの場合（Chrome、Safari、Opera 15以降では期待どおりに機能しない場合があります）：
object.onfocusout = function(){myScript};
JavaScriptでは、addEventListener（）メソッドを使用します。
object.addEventListener("focusout", myScript);
注： addEventListener （）メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
| 泡： | はい |
|---|---|
| キャンセル可能： | 番号 |
| イベントタイプ： | FocusEvent |
| サポートされているHTMLタグ： | <base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>、および<title>を除くすべてのHTML要素 |
| DOMバージョン： | レベル2のイベント |
その他の例
例
「onfocusin」を「onfocusout」イベントと一緒に使用する：
<input type="text" onfocusin="focusFunction()" onfocusout="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イベントの使用：
<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>