【jQuery】指定した要素にフォーカスを当てる方法

フォームやインタラクティブな要素を含むウェブページでは、特定の条件で要素にフォーカスを当てることが求められる場面があります。jQueryを使用することで簡単に要素にフォーカスを当てることができます。本記事では、jQueryの.focus()メソッドを使用したフォーカスの設定方法を紹介します。

基本的なフォーカスの設定方法

まず、基本的な使い方から見ていきます。特定の要素にフォーカスを当てるには、次のように.focus()メソッドを使用します。

$(document).ready(function() {
  // IDが'target'のinput要素にフォーカスを当てる
  $('#target').focus();
});

このコードは、ページが読み込まれた際に自動的にid=”target”の要素にフォーカスを当てます。主に、フォームの自動フォーカスなどで使用されます。

次に、ユーザーのアクションに基づいてフォーカスを当てる方法を紹介します。たとえば、ボタンをクリックしたときに特定の要素にフォーカスを移動させたい場合、次のように実装します。

$('#button').click(function() {
  $('#target').focus();
});

このコードでは、id=”button”のボタンをクリックすることで、id=”target”の要素にフォーカスが移動します。ユーザー操作に応じたインタラクティブな動作を実現する際に役立ちます。

フォームの入力欄が空の場合など、特定の条件に基づいてフォーカスを当てることも可能です。次の例では、#input1が空欄だった場合にその入力欄にフォーカスを当てます。

if ($('#input1').val() === '') {
  $('#input1').focus(); // 空欄の場合にフォーカスを当てる
}

このように、入力チェック後にエラー箇所へ自動的にフォーカスを移動させることで、ユーザー体験を向上させることができます。

jQueryの.focus()メソッドを使うことで、簡単に要素にフォーカスを当てることができます。自動フォーカスやユーザーのアクションに基づくフォーカス移動は、ウェブサイトの操作性を向上させるために非常に有効です。フォームや入力チェックの際にぜひ活用してみてください。