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

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

目次

１．focus メソッド
２．focus で特定の要素にフォーカスを当てる
３．focus と blur でフォーカスが当たった際の処理を実装

１．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 )
イベント発生時に実行する処理を関数として指定

.focus( [ 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(“　”); 」として 表示されたテキストを非表示にしています。

▲目次へ戻る