例
入力フィールドがフォーカスを取得しようとするときにJavaScriptを実行します。
<input type="text"
onfocusin="myFunction()"> »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
要素がフォーカスを取得しようとするときにonfocusinイベントが発生します。
ヒント：onfocusinイベントはに似てONFOCUSイベント。 主な違いは、ONFOCUSイベントがバブルしないことです。 あなたは要素またはその子がフォーカスを取得するかどうかを知りたい場合はそのため、あなたはonfocusinイベントを使用する必要があります。
ヒント：Firefoxはonfocusinイベントをサポートしていませんが、あなたは、要素の子は、のためにキャプチャリスナーを使用することにより、フォーカスを取得するかどうかを調べることができますONFOCUS （のオプションのuseCaptureパラメータ使用してイベントaddEventListener()メソッドを）。
Tip: onfocusinイベントは反対であるonfocusoutイベント。
ブラウザのサポート
| イベント | |||||
|---|---|---|---|---|---|
| onfocusin | はい | はい | サポートされていません | はい | はい |
注意：クロム、SafariやOperaの15+で期待どおりonfocusinイベントは、JavaScriptのHTML DOM構文を使用して動作しない場合があります。 しかし、それは、HTML属性として、および使用して動作するはずaddEventListener()メソッドを。
構文
HTMLには：
JavaScriptでは(may not work as expected in Chrome, Safari and Opera 15+) ：
object .onfocusin=function(){ »それを自分で試してみてください JavaScriptでは、使用してaddEventListener()メソッドを：
object .addEventListener("focusin", myScript );
»それを自分で試してみてください 注： addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョンでサポートされていません。
技術的な詳細
| バブル： | はい |
|---|---|
| 取消し可能： | ノー |
| イベントの種類： | FocusEvent |
| サポートされているHTMLタグ： | <ベース>、<BDO>、<BR>、<HEAD>、<HTML>、<iframe>の、<メタ>、<PARAM>、<SCRIPT>、<スタイル>、および：EXCEPT ALL HTML要素、 <title> |
| DOMバージョン： | レベル2のイベント |
その他の例
例
使い方"onfocusin"と一緒に"onfocusout"イベント：
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
»それを自分で試してみてください 例
イベント委任：のuseCaptureパラメータの設定addEventListener() trueにする(for focus and blur) ：
<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>
»それを自分で試してみてください <イベントオブジェクト