jQueryでページのロード時に指定のフォームにフォーカスを当ててみる

2013/04/10 2017/12/07

ログインページなどでページを開いた時に、IDやユーザ名用テキストボックスにフォーカスを当てたい場合の書き方。
jQueryの小技って事で軽く。

指定フォームにフォーカスを当てる

HTML / Javascript

<head>
<script type="text/javascript">
$(document).ready( function(){
    $('#login_id').focus();
});
</script>
</head>
<body>

<form method="post" action="#">
ログインID : <input type="text" name="id" id="login_id"><br />
ログインPW : <input type="text" name="password" id="login_pw">

<input type="submit" name="login" value="送信">
</form>

<head>

$(document).ready( function(){

$('#login_id').focus();

});

</script>

</head>

<body>

ログインID : <input type="text" name="id" id="login_id"><br />

ログインPW : <input type="text" name="password" id="login_pw">

</form>

HTMLのフォームIDを、スクリプトの方へ指定すれば、ページロード時に「ログインID」用のフォームにフォーカスが当たります。
お手軽ですね。

-Javascript,jQuery
-jquery, js, フォーカス

: jQueryで各国通貨を日本円にするコンバーターを作ってみた。

APIで利用できる通貨をセレクトボックスで選択し、日本円に換算するというスクリプトを作ってみました

: 【JS】ミニロト、ロト6、ロト7番号ジェネレータを作ってみた

以前のポストで作った「ミニロト」番号ジェネレータを拡張して、ロト３種を選択できるようにしたものを作ってみました。

: 【JS】jQuery / jQuery UI の読込みを Google の Libraries サイト(CDN)から参照する方法

jQuery 及び jQuery UI をCDNから参照する方法を、ほぼ自分用のメモとしてポストします。

: スマホアプリでよく見る横から出てくるスライドメニューを実装できるjQueryのプラグイン「Sidr」。

スマホ向けサイトを作成の際、メニューをスマホアプリのように横から出したくなり探しました所、「Sidr」というプラグインを発見。

: 【jQuery】画面の縦・横幅を取得して、ボックス要素を中央に配置する方法

Javascriptのアラートウィンドウのようなものを自作したいとき、jQueryを使って画面(ブラウザ)の縦・横幅を取得し、表示させたいボックスを画面の中央に配置する法です。

PREV: CentOSサーバに「NTP」をインストールする方法
NEXT: 【Google Chrome】スクリーンキャプチャができなくなっていたので調べてみた

jQueryでページのロード時に指定のフォームにフォーカスを当ててみる

指定フォームにフォーカスを当てる

HTML / Javascript

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,175)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,496)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (254,929)

【歴史】江戸幕府歴代将軍一覧 (142,959)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,881)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (127,936)