BLOGスタッフブログ

[jQuery] focus()メソッドを用いて初期フォーカスを設定する方法

こんにちは。
本日は.focus()メソッドを用いて初期フォーカスを設定する方法を、共有したいと思います。
それでは、以下手順となります。

Viewを作成する

templates/Test/の中にtest.phpを作成し、
フォームを複数用意します。

<?php echo $this->Html->script('/test/js/test'); ?>
入力フォーム1 <?php echo $this->Form->text('input.form1', array('id' => true, 'placeholder' => '入力フォーム1')); ?><br>
入力フォーム2 <?php echo $this->Form->text('input.form2', array('id' => true, 'placeholder' => '入力フォーム2')); ?><br>
入力フォーム3 <?php echo $this->Form->text('input.form3', array('id' => true, 'placeholder' => '入力フォーム3')); ?><br>
入力フォーム4 <?php echo $this->Form->text('input.form4', array('id' => true, 'placeholder' => '入力フォーム4')); ?>

スクリプトを作成する

webroot/js/の中にtest.jsを作成します。
次にfocus()メソッドを用いて、初期フォーカスを行うフォームの
idを指定することでフォーカスの指定が可能です。

$(function() {
// ------------------------------------
// 初期フォーカス設定
// ------------------------------------
$('#input-form3').focus();//初期フォーカスを行うフォームのidを指定
});

動作確認

画面を表示し「入力フォーム3」にフォーカスが移動していれば成功です。
ブログ用の画像

使用頻度は少ないかもしれませんが、下記の方法で
何番目の入力フォームかといった指定方法も可能です。

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

いかがだったでしょうか?
今後もjQueryに関する記事を投稿しますのでお楽しみに。

高木 祐玖が書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します