onfocusイベント
例
入力フィールドがフォーカスを取得したら、JavaScriptを実行します。
<input type="text"
onfocus="myFunction()">
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
onfocusイベントは、要素がフォーカスを取得したときに発生します。
onfocusイベントは、ほとんどの場合、<input>、<select>、および<a>で使用されます。
ヒント: onfocusイベントは、 onblurイベントの反対です。
ヒント: onfocusイベントはonfocusinイベントに似てい ます。主な違いは、onfocusイベントがバブルしないことです。したがって、要素またはその子がフォーカスを取得するかどうかを確認する場合は、onfocusinイベントを使用できます。ただし、これは 、onfocusイベントのaddEventListener()メソッドのオプションのuseCaptureパラメーターを使用して実現できます。
ブラウザのサポート
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
構文
HTMLの場合:
<element onfocus="myScript">
JavaScriptの場合:
object.onfocus = function(){myScript};
JavaScriptでは、addEventListener()メソッドを使用します。
object.addEventListener("focus", myScript);
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | 番号 |
---|---|
キャンセル可能: | 番号 |
イベントタイプ: | FocusEvent |
サポートされているHTMLタグ: | <base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>、および<title>を除くすべてのHTML要素 |
DOMバージョン: | レベル2のイベント |
その他の例
例
「onfocus」を「onblur」イベントと一緒に使用する:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
例
フォーカスの入力フィールドをクリアします。
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
例
イベントの委任: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>