onfocusoutイベント

事件对象参考手册イベントオブジェクト

例

input 入力欄がフォーカスを失う直前に JavaScript を実行:

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

試してみる »

この章の下部には、その他の例があります。

定義と使い方

onfocusout イベントは、要素がフォーカスを失う直前に発生します。

ヒント：onfocusout イベントは類似していますonblurイベント。主な違いは、onblur イベントがバブリングをサポートしないことです。したがって、要素またはその子要素がフォーカスを取得したかどうかを確認する必要がある場合は、onfocusout イベントを使用する必要があります。

ヒント：Firefox は onfocusout イベントをサポートしていませんが、次を使用することでonfocus（addEventListener() メソッドのオプションのパラメータを使用useCapture）のキャプチャリスナーイベントで、要素またはその子要素がフォーカスを失ったかどうかを確認できます。

ヒント：onfocusout イベントの反対のイベントはonfocusinイベント。

ブラウザサポート

イベント
onfocusout Yes Yes Yes Yes Yes

注意：Chrome、Safari、Opera 15+ ブラウザでは、HTML DOM 構文の onfocusin イベントが正常に動作しない場合があります。ただし、HTML 要素としては、addEventListener() メソッドを使用することで正常に動作します。

構文

HTML 内:

<element onfocusout="myScript">試してみる

JavaScript (Chrome、Safari および Opera 15+ では正常に動作しない場合があります) 内:

object.onfocusout=function(){myScript};試してみる

JavaScript 内で、addEventListener() メソッドを使用:

object.addEventListener("focusout", myScript);試してみる

注意：Internet Explorer 8 およびそれ以前の IE バージョンはサポートしていませんaddEventListener()メソッド。

技術的な詳細

バブリングをサポートするか: Yes
キャンセルできるか: No
イベントタイプ: FocusEvent
サポートされる HTML タグ: すべての HTML 要素、以下を除く: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, および <title>

实例

その他の例

例

"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>

試してみる »

例

イベント委任：focusout イベントを使用 ( 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>

試してみる »

事件对象参考手册イベントオブジェクト

その他の拡張