こんにちは、ライターのマサトです！
今回は、jQueryで入力フォームなど特定の要素にフォーカスした時にイベント処理を実行できる「focus()」について学習しましょう！
この記事では、
- 「focus()」とは？
- inputタグにフォーカスする関数を指定する
- 最初の要素にフォーカスする
- blur()でフォーカスを外す
- フォーカスを移動するには？
- focus()とselect()の組み合わせ
- focus()の類似メソッド
などの基本的な内容から、応用的な使い方に関しても解説していきます。
この記事で、「focus()」をしっかり学習して自分のスキルアップを目指しましょう！
「focus()」とは？
それでは、まず最初に「focus()」についての基本的な知識から学んでいきましょう！
「focus()」は、主にinput要素などにフォーカスさせた時に実行できるイベント処理を記述することができます。
例えば、以下のようなテキストボックスがあるとします。
<input type="text"> <input type="text">
通常であれば、テキストボックスをクリックすることでフォーカスを当てることが可能です。
しかし、focus()を活用すればWebページが表示された時に1つ目のテキストボックスにフォーカスさせることができます。
また、テキストボックスの入力が終わった時に自動で次のテキストボックスにフォーカスさせるようなことも可能です。
つまり、focus()を利用することでユーザーに優しいWebページを作り込むことが出来るわけです！
本記事では、focus()の基本的な知識から応用技まで詳しく解説していきますので、ぜひ参考にしてみてください！
inputタグにフォーカスする
ここからは、実際に「focus()」を使いながらプログラミング手法を学んでいきましょう！
一般的な記述方法としては、【 対象要素.focus() 】のようにフォーカスさせたい要素にfocus()を実行するだけでOKです。
次のサンプル例を見てください！
<body>
<input type="text">
<script>
$('input').focus();
</script>
</body>
この例では、単純なinputタグで作られたテキストボックスが配置されています。
通常であれば、画面にはテキストボックスがそのまま表示されるだけですよね？
しかし、このinput要素に対して「focus()」を実行するだけでテキストボックスがフォーカスされた状態で表示されるというわけです。
これにより、ユーザーは画面が表示されてそのまますぐに文字列を入力できるようになるので便利ですね。
関数を指定する
「focus()」はイベント処理用の関数を指定することで、さまざまな処理を実行することができます。
記述方法としては、【 対象要素.focus( 関数 ) 】のように引数へ関数を指定すればOKです！
例えば、テキストボックスがフォーカスされた時に入力ボックスの背景色を変えてみましょう。
次のサンプル例を見てください！
<body>
<input type="text">
<script>
$('input').focus(function() {
$(this).css('background-color', '#aaf');
});
</script>
</body>
まずは、focus()の引数に関数を指定した記述方法に注目してみてください。
上記のように関数を記述することで、フォーカスされた瞬間に関数内のコードが実行されるようになります。
関数内では、「css()」を使って入力ボックスの背景色を変更していますね。
関数を指定すると通常のテキストボックスと同様に、クリックしないとフォーカスされなくなるので注意しましょう！
最初の要素にフォーカスする
今度は、focus()を使ってWebサイトにある1つ目のテキストボックスへ自動的にフォーカスさせる方法について見ていきましょう！
例えば、次のように3つのテキストボックスがあるとします。
<input type="text"> <input type="text"> <input type="text">
この場合、これまでのように次のような記述をするとどうなるでしょうか？
$('input').focus();
たしかにフォーカスはされますが、最後に追加されたテキストボックスにフォーカスされるのです。
そこで、一番最初のテキストボックスにフォーカスさせるためには、1つ目のinput要素を指定すれば良いわけですね。
$('input').first().focus();
このように「first()」メソッドを使うことで、1つ目のinput要素を指定することになるのです。
ちなみに、上記のコードは「eq()」メソッドを使って「$(‘input’).eq(0).focus()」のように記述しても良いでしょう。
このままでも良いですが、もし何らかの理由で1つ目のinput要素が「hidden（非表示）」になった場合も考慮してみましょう。
input要素に「hidden」が指定されると非表示になって画面には表示されないわけですが、フォーカスも非表示になってしまいます。
そこで、表示されているinput要素の1つ目だけにフォーカスを当てるには次のようにします。
$('input:visible').first().focus();
「visible（表示）」をセレクタに指定することで、画面に表示された1つ目のテキストボックスにフォーカスされるというわけです。
blur()でフォーカスを外す
これまでは、フォーカスされた時の処理を解説していましたが、フォーカスが外れた時の処理も一緒に学習しましょう！
フォーカスが外れた時にイベント処理を実行するには「blur()」メソッドを使用します。
記述方法はfocus()と同じく、【 対象要素.blur( 関数 ) 】のように引数へ実行したい関数を指定するだけです。
次のサンプル例を見てください！
<body>
<input type="text">
<script>
$('input').blur(function() {
console.log('フォーカスが外れました');
});
</script>
</body>
実行結果
フォーカスが外れました
この例では、テキストボックスに対してblur()の関数が指定されているのが分かりますね。
試しにテキストボックスをフォーカスさせてから、今度はフォーカスを外してみましょう！
すると、実行結果のようにコンソールログへ「フォーカスが外れました」と出力されます。
このように「focus()」「blur()」は相互に関連するため、ペアで使われることもあるのでよく覚えておきましょう！
フォーカスを移動するには？
「focus()」を使うと、入力が終わった瞬間に次のテキストボックスへフォーカスを当てることも可能になります。
これにより、ユーザーは入力作業に集中することができるのでユーザービリティの向上に繋がるわけです。
例えば、次のようなテキストボックスがあるとします。
<input type="text" maxlength="8"> <input type="text" maxlength="8">
ポイントは「maxlength」を設定している点です。
考え方としては、テキストボックスに入力できる最大文字数（maxlength）を設定することで条件分岐させるわけです。
つまり、最大文字数に達した段階で次のテキストボックスへフォーカスを移動させれば良いという意味です。
そこで、入力した文字数を監視しながら「現在の文字数」と「最大文字数」を比較していきましょう！
次のサンプル例を見てください！
$('input').on('keyup', function() {
const max = $(this).attr('maxlength'); //最大文字数
const current = $(this).val().length; //現在の文字数
//最大文字数を超えたかどうか？
if(current >= max) {
$(this).next().focus();
}
})
まずはon()を使って「keyup」イベントから文字入力時のイベント処理を記述します。これにより、キーボードから文字を入力するたびにこのイベント処理が実行されるわけですね。
input要素に設定された最大文字数は「attr(‘maxlength’)」で取得可能です。
また、現在の入力文字数は「val().length」で取得可能です。
そこで、「最大文字数」と「入力文字数」をIF文で条件分岐させて超えたら「next().focus()」で次のテキストボックスに移動します。
このように、考え方さえ分かればフォーカスを自動的に移動させることはそれほど難しくないことが分かるでしょう。
focus()とselect()の組み合わせ
長文のテキストボックスなどで、フォーカスされた瞬間にすべての文字列を選択状態にしてみましょう！
この場合、focus()以外に文字列を選択状態にするための「select()」メソッドも一緒に活用します。
例えば、「textarea」要素に以下のような文字列があるとします。
<textarea> あいうえお かきくけこ さしすせそ </textarea>
この状態で、textareaにフォーカスを当てた時に中身の文字列をすべて選択状態にしたい場合はどうすればいいでしょうか？
考え方としては、フォーカスされたあとに「select()」メソッドを実行すれば簡単に実現します。
次のサンプル例を見てください！
$('textarea').focus(function() {
$(this).select();
})
先ほどのtextarea要素に対して「focus()」メソッドの関数を実行しているのが分かりますね。
そして、その関数内で「select()」メソッドを実行することで、フォーカスが当たった瞬間にすべての文字列が選択状態になるわけです。
このように記述することで、例えばユーザーが文字列をコピーしなければいけないようなケースなどで役に立つでしょう！
focus()の類似メソッド
jQueryにはfocus()以外にも、よく似た類似メソッドがあるのでまとめてご紹介しておきます！
これらのメソッドを状況に応じて使い分けられるようになれば、さらに効率の良いプログラミングが可能になります。
ぜひ、この機会に合わせて活用できるように頑張りましょう！
focusin()について
まずは、focus()メソッドとほとんど同じ処理が可能な「focusin()」メソッドについて学習しましょう！
記述方法も同様に、【 対象要素.focusin( 関数 ) 】のように引数へ実行させたい関数を指定すればOKです。
focus()と違う点としては、子要素(子孫要素も含む)に対してもイベント処理の実行が効くかどうか？…という点が挙げられます。
例えば、次のサンプル例を見てください！
<body>
<form>
<input type="text">
</form>
<script>
$('form').focusin(function() {
console.log('フォーカスされました');
});
</script>
</body>
この例では、form要素内に単純なテキストボックスが配置されています。
テキストボックスから見て親要素である「form」に対してfocusin()メソッドの関数が設定されているのが分かりますね。
この状態でテキストボックスにフォーカスを当てると、コンソールログに指定した文字列が出力されます。
これをfocus()メソッドで同じように行うと指定した関数は実行されません。
つまり、ポイントは以下のとおりです！
- 親要素に対してfocus()を設定しても子要素以下には反応しない
- 親要素に対してfocusin()を設定すれば子要素以下にも反応する
このように、focus() / focusin()を設定する対象要素に応じて使い分けられるようになりましょう！
focusout()について
今度は、focusin()と逆の用途で使える「focusout()」について見ていきましょう！
冒頭でも少し解説しましたが、フォーカスが外れた際にイベントを実行できるメソッドとして「blur()」がありましたね。
これとほぼ同じことを実現できるのが「focusout()」メソッドになります。
そして、focusin()メソッドと同じく子要素以下にもイベントが反応する性質を持っているわけです。
次のサンプル例を見てください！
<body>
<form>
<input type="text">
</form>
<script>
$('form').focusout(function() {
console.log('フォーカスが外れました');
});
</script>
</body>
この例では、テキストボックスの親要素であるformに対して、focusout()メソッドの関数が設定されていますね。
focusin()と同様に、子要素以下にもイベント処理が反応するのでblur()とは異なる点になるわけです。
対象とする要素に対して、「focus() / focusin()」や「blur() / focusout()」を使い分けられるようになりましょう！
まとめ
今回は、jQueryで特定の要素をフォーカスした時のイベント処理を実行できる「focus()」について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
- focus()でフォーム部品などにフォーカスを当てた際のイベント処理を実行できる
- フォーカスが当たった瞬間にイベント処理を実行するにはfocus() / focusin()を利用する
- フォーカスが外れた際にイベント処理を実行するにはblur() / focusout()を利用する
- 子要素以下にもイベント処理を反応させたい場合はfocusin() / focusout()を使う
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
