今回は jQuery で要素にフォーカスを当てる方法について説明します。
ページの読み込み時に最初に入力するフォームに自動的にフォーカスを当てることによって、ユーザーの手間を省くことができます。
focus() メソッドの使い方
特定の要素にフォーカスを当てる場合は focus() メソッドを使います。
focus() メソッドの記述方法は以下の通りです。
|
1 |
jQueryオブジェクト.focus() |
最初のフォームにフォーカスを当てる
最初のフォームにフォーカスを当てる場合は以下のようにします。
|
1 |
$('input:visible').eq(0).focus(); |
input タグが付いているものを検索した後、eq(0) で最初の要素を取得し、その要素に対してフォーカスを当てています。また、非表示のものを除外するために visible を指定しています。もしページ内に他の input タグがある場合は、name などを指定して使用します。
以下はページの読み込み後にフォーカスを当てるサンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <form> ID: <input type="text" name="id"><br> PW: <input type="text" name="password"> <input type="submit" name="login" value="送信"> </form> </body> <script> $(document).ready( function(){ $('input:visible').eq(0).focus(); }); </script> </html> |
フォーカスを移動させる
たとえば、クレジットカードなどの番号を入力するときに指定の桁数を入力した後に、次のフォームにフォーカスを移動させたいときがあります。そのような場合も focus() メソッドを使うことで実現することができます。
以下は、４桁の数字を入力した後にフォームのフォーカスを次のフォームへ移動させるサンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <form> <input type="text" name="card_number1" maxlength="4"> - <input type="text" name="card_number2" maxlength="4"> - <input type="text" name="card_number3" maxlength="4"> - <input type="text" name="card_number4" maxlength="4""> <input type="submit" value="送信"> </form> </body> <script> $('input[name^="card_number"]').keyup(function() { if ($(this).val().length >= $(this).attr('maxlength')) { $(this).next().focus(); } }); </script> </html> |
上の例では、まず input タグの name が card_number のフォームに入力があった場合に、 入力文字数を確認します。そして、入力が maxlength で指定した値以上になったときに、次の要素にフォーカスを移動するようにしています。
以下はサンプルコードの動作例です。
フォームに４桁の値を入力すると次のフォームへ自動的に移動します。
