2007年5月28日(月) 12時11分20秒 [入力フォーム]
入力欄に最初からカーソルを入れる（フォーカスを与える）
ログインフォームのように、何らかの文字入力が必要なページを表示する場合、最初から入力欄（テキスト入力フォーム）の中にカーソルが入っていると便利です。わざわざマウスで入力欄をクリックしなくても、そのままキーボードで入力可能になりますから。
特定の入力欄にカーソルを入れる（フォーカスする）には、以下のようにJavaScriptを記述します。
document.(フォーム名).(要素名).focus();
「フォーム名」はform要素に付けたname属性の値、「要素名」はinput要素に付けたname属性の値です。
例えば、以下のようなHTMLがある場合…
<form name="sampleform">
A: <input type="text" size="21" value="" name="sakura" /><br />
B: <input type="text" size="21" value="" name="tomoyo" /><br />
</form>
以下のようにJavaScriptを記述すれば、入力欄「A」にフォーカスする（＝カーソルを入れる）ことができます。
document.sampleform.sakura.focus();
ページの読込完了と同時に実行したいなら、body要素のonload属性の中に直接書けば良いでしょう。以下のような感じで。
<body onload="document.sampleform.sakura.focus();"> ～
実行サンプルは以下の通り。
ボタンをクリックすると、（どこにフォーカスがあっても）入力欄Aにカーソルが移動します。
なお、フォーカス先は入力欄だけでなく、チェックボックスやボタンなども指定できます。
この日記へのコメントはお気軽に！ コメント数:0 トラックバック数:0
| « 特定の要素の中身をごっそり書き換える |
前後のエントリ < 旧 ／ 新 > | 特定の座標にスクロールさせる » |
JavaScript TIPS 主要なカテゴリ
現在、以下のカテゴリに区分してTIPSを公開しています。