onfocusinイベント

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

例

入力フィールド（input）がフォーカスを取得する直前に JavaScript を実行します:

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

試してみる »

この章の下部にはさらに例があります。

定義と用法

onfocusin イベントは、要素がフォーカスを取得する直前に発生します。

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

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

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

ブラウザサポート

イベント
onfocusin Yes Yes サポートされていません Yes Yes

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

構文

HTML の場合:

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

JavaScript（Chrome、Safari、Opera 15+ では正常に動作しない場合があります）の場合:

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

JavaScript で addEventListener() メソッドを使用する場合:

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

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

技術的な詳細

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

Examples

その他の例

例

「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 イベントを使用（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>

試してみる »

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

その他の拡張