jQueryで要素にフォーカスを当てる：focus()

今回は jQuery で要素にフォーカスを当てる方法について説明します。

ページの読み込み時に最初に入力するフォームに自動的にフォーカスを当てることによって、ユーザーの手間を省くことができます。

focus() メソッドの使い方

特定の要素にフォーカスを当てる場合は focus() メソッドを使います。

focus() メソッドの記述方法は以下の通りです。

jQueryオブジェクト.focus()

最初のフォームにフォーカスを当てる

最初のフォームにフォーカスを当てる場合は以下のようにします。

$('input:visible').eq(0).focus();

input タグが付いているものを検索した後、eq(0) で最初の要素を取得し、その要素に対してフォーカスを当てています。また、非表示のものを除外するために visible を指定しています。もしページ内に他の input タグがある場合は、name などを指定して使用します。

以下はページの読み込み後にフォーカスを当てるサンプルです。

<!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() メソッドを使うことで実現することができます。

以下は、４桁の数字を入力した後にフォームのフォーカスを次のフォームへ移動させるサンプルです。

<!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 で指定した値以上になったときに、次の要素にフォーカスを移動するようにしています。

以下はサンプルコードの動作例です。

フォームに４桁の値を入力すると次のフォームへ自動的に移動します。