例
入力フィールドがフォーカスを取得したときにJavaScriptを実行します。
<input type="text"
onfocus="myFunction()"> »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
要素がフォーカスを取得したときONFOCUSイベントが発生します。
ONFOCUSイベントは、ほとんどの場合の<input>、<select>の、そして一緒に使用される<a> 。
Tip: ONFOCUSイベントは反対であるのonblurイベント。
ヒント：ONFOCUSイベントはに似てonfocusinイベント。 主な違いは、ONFOCUSイベントがバブルしないことです。 あなたは要素またはその子がフォーカスを取得するかどうかを知りたい場合はそのため、あなたはonfocusinイベントを使用することができます。 しかし、あなたはのオプションのuseCaptureパラメータ使用してこれを達成することができますaddEventListener() ONFOCUSイベントのための方法を。
ブラウザのサポート
| イベント | |||||
|---|---|---|---|---|---|
| onfocus | はい | はい | はい | はい | はい |
構文
HTMLには：
JavaScriptで：
object .onfocus=function(){ »それを自分で試してみてください JavaScriptでは、使用してaddEventListener()メソッドを：
object .addEventListener("focus", myScript );
»それを自分で試してみてください 注： addEventListener()メソッドは、Internet Explorer 8およびそれ以前のバージョンでサポートされていません。
技術的な詳細
| バブル： | ノー |
|---|---|
| 取消し可能： | ノー |
| イベントの種類： | FocusEvent |
| サポートされているHTMLタグ： | <ベース>、<BDO>、<BR>、<HEAD>、<HTML>、<iframe>の、<メタ>、<PARAM>、<SCRIPT>、<スタイル>、および：EXCEPT ALL HTML要素、 <title> |
| DOMバージョン： | レベル2のイベント |
その他の例
例
使い方"onfocus"一緒に"onblur"イベント：
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
»それを自分で試してみてください 例
イベント委任：のuseCaptureパラメータの設定addEventListener() 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>
»それを自分で試してみてください <イベントオブジェクト