メッセージ送信フォームやアンケートフォームなど、アクセス者に何らかの文字を入力してもらうページでは、 先頭の入力欄に最初からカーソルが入っていると便利です。 マウスを使って、わざわざ入力欄をクリックする手間が省けるからです。
 |
| ▲先頭の入力欄に最初からカーソルが入っていると便利 |
特定の入力欄に最初からカーソルを入れておくようにする方法は、JavaScriptを使うと簡単に実現できます。 記述するJavaScriptは、たったの1行です。
指定の入力欄にカーソルを入れるには
記述する内容をまずは簡単にだけご紹介いたします。 記述手順は以下の通りです。
- 入力欄にidを割り振る
- スクリプトを1行書く
[STEP.1] 入力欄にidを割り振る
まずは、カーソルを自動で入れたい入力欄に、id属性を使ってID名を加えます。例えば、以下のようにします。 （※ここでは、「firstinput」というID名にしています。）
<input type="text" id="firstinput">
[STEP.2] スクリプトを1行書く
次に、先ほどのID名を持った要素にフォーカスを与えるようJavaScriptを記述します。
document.getElementById('firstinput').focus();
記述するのは、たったこれだけです。
これで、「firstinput」というID名を付加した入力欄にカーソルを自動で入れることができます。
※入力欄ではなくボタンやチェックボックスの場合は、選択状態になります。
上記の説明だけでは具体的にどう記述するのかが分かりにくいので、次のページではもっと具体的な活用例（ソース）を使ってご紹介いたします。
