ITコラム

jQuery

2018.10.02

jQuery【 focus 】フォーカスが当たった際の処理

jQuery の focus メソッドを使うと、指定した要素にフォーカスを当てたりフォーカスが当たった際にイベントを発生させることができます。
今回は、jQuery の focus メソッドの使用方法について紹介します。

１．focus メソッド

　
focus メソッドは、特定の要素にフォーカスを当てたりフォーカスが当たった際にイベントを発生させたりするメソッドです。

focus メソッドは、引数によって 3 通りの記述方法があります。

$(セレクタ).focus( );

$(セレクタ).focus( handler( eventObject ) );

$(セレクタ).focus( [ eventData ], handler( eventObject ) );

引数なしの「 .focus( ) 」は、「 .trigger(“focus”) 」の省略形です。
（trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。）

また、「 .focus( handler( eventObject ) ) 」及び「 .focus( [ eventData ], handler( eventObject ) ) 」は、「 on( “focus”, handler ) 」の省略形です。
（on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。）

focus メソッドの引数の内容は、それぞれ以下の通りです。

.focus( handler( eventObject ) )

handler( eventObject )

イベント発生時に実行する処理を関数として指定

handler( eventObject )
イベント発生時に実行する処理を関数として指定

.focus( [ eventData ], handler( eventObject ) )

[ eventData ]

イベントハンドラに渡すデータをマップ値で指定

handler( eventObject )

イベント発生時に実行する処理を関数として指定

[ eventData ]
イベントハンドラに渡すデータをマップ値で指定
handler( eventObject )
イベント発生時に実行する処理を関数として指定

▲目次へ戻る

２．focus で特定の要素にフォーカスを当てる

　
focus メソッドを使用して、特定の要素にフォーカスを当てます。
focus ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn1").on("click", function() {

    $("#txt1").focus();
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="button" id="btn1" value="focus">
　<input type="text" id="txt1">
</div>

「 $(“#txt1”).focus(); 」のように、フォーカスを当てたい要素を指定して引数なしの focus メソッドを記述すると、フォーカスを当てることができます。

上のサンプルは動きを分かりやすくするためにボタンをクリックしたタイミングでフォーカスを当てていますが、「 $(“#btn1”).on(“click”, function() {…}); 」を記述せずに「 $(“#txt1”).focus(); 」のみを記述すると、ページが読み込まれた時点でフォーカスが当たります。

▲目次へ戻る

３．focus と blur でフォーカスが当たった際の処理を実装

　
focus と blur を使用して、特定の要素にフォーカスが当たった際の処理を実装します。
次の 2 つのテキストボックスにフォーカスを当ててみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#txt2").focus(function(){

    $(this).css("background-color","#blue");

  }).blur(function(){

    $(this).css("background-color","#EEE");
  });

  $("#txt3").focus(function(){

    $("#spn1").html("感想をご記入下さい");

  }).blur(function(){

    $("#spn1").html("　");
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="text" id="txt2">
  <input type="text" id="txt3">
  <span id="spn1">　</span>
</div>

focus メソッドでフォーカスが当たった際の処理を記述することができますが、同様に blur メソッドを使用するとフォーカスが外れた際の処理を記述することができます。

「 $(“#txt3”).focus(function(){…}).blur(function(){…}); 」のように記述して一連のフォーカスイベントを実装することができます。

上のサンプルでは、上のテキストボックスにフォーカスが当たった際に「 $(this).css(“background-color”,”#blue”); 」としてテキストボックスの背景色が青になるように記述しています。
フォーカスが外れた際には「 $(this).css(“background-color”,”#EEE”); 」として元の背景色に戻るように記述しています。

下のテキストボックスに関しては、フォーカスが当たった際に「 $(“#spn1”).html(“感想をご記入下さい”); 」として指定したエリアに注意書きのテキストが表示されるようにしています。
フォーカスが外れた際には「 $(“#spn1”).html(“　”); 」として表示されたテキストを非表示にしています。

▲目次へ戻る