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

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

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

focus() メソッドの使い方

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

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

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

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

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

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

フォーカスを移動させる

たとえば、クレジットカードなどの番号を入力するときに指定の桁数を入力した後に、次のフォームにフォーカスを移動させたいときがあります。そのような場合も focus() メソッドを使うことで実現することができます。

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

上の例では、まず input タグの name が card_number のフォームに入力があった場合に、 入力文字数を確認します。そして、入力が maxlength で指定した値以上になったときに、次の要素にフォーカスを移動するようにしています。

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

- - -

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて