メッセージ送信フォームやアンケートフォームなど、アクセス者に何らかの文字を入力してもらうページでは、先頭の入力欄に最初からカーソルが入っていると便利です。マウスを使って、わざわざ入力欄をクリックする手間が省けるからです。
▲先頭の入力欄に最初からカーソルが入っていると便利
特定の入力欄に最初からカーソルを入れておくようにする方法は、JavaScriptを使うと簡単に実現できます。記述するJavaScriptは、たったの1行です。
指定の入力欄にカーソルを入れるには
記述する内容をまずは簡単にだけご紹介いたします。記述手順は以下の通りです。
入力欄にidを割り振る
スクリプトを1行書く
[STEP.1] 入力欄にidを割り振る
まずは、カーソルを自動で入れたい入力欄に、id属性を使ってID名を加えます。例えば、以下のようにします。（※ここでは、「firstinput」というID名にしています。）
id='firstinput'>
[STEP.2] スクリプトを1行書く
次に、先ほどのID名を持った要素にフォーカスを与えるようJavaScriptを記述します。
document.getElementById('
firstinput').focus();
firstinput').focus();
記述するのは、たったこれだけです。
これで、「firstinput」というID名を付加した入力欄にカーソルを自動で入れることができます。
※入力欄ではなくボタンやチェックボックスの場合は、選択状態になります。
上記の説明だけでは具体的にどう記述するのかが分かりにくいので、次のページではもっと具体的な活用例（ソース）を使ってご紹介いたします。
指定の入力欄にカーソルを入れる具体的なソース
■HTML部分：
まずは、以下のようなHTMLがあるとします。入力欄が3つあります。（input要素による1行入力欄が2つと、textarea要素による複数行入力欄が1つ）
お名前：
メール：
コメント：
メール：
コメント：
このうち、先頭の入力欄（ここでは「お名前」欄）に自動的にカーソルを入れたい場合を考えます。そこで、「お名前」欄を作っているinput要素にid属性を追加して、以下のように記述します。
お名前： id='
firstinput'>
メール：
コメント：
firstinput'>
メール：
コメント：
■JavaScript部分（タイプ１）：
指定の入力欄に自動でカーソルを入れるためのJavaScriptは、そのページのbodyタグ内にonload属性を使って以下のようにして記述します。
onload='document.getElementById('
firstinput').focus();'>
firstinput').focus();'>
body要素のonload属性の値として記述したスクリプトは、ページの読込完了後に実行されます。つまり、ページの読み込みが完了したと同時に、指定した入力欄にカーソルが入ることになります。
■JavaScript部分（タイプ２）：
上記の場合だと、「ページの読込完了後」にスクリプトが実行されるため、ページ全体の読込完了までに時間がかかるような大きなページでは、カーソルが自動で入るまでにも時間がかかってしまいます。そのような場合は、入力欄（入力フォーム）のHTMLを記述した直後に、次のようにしてスクリプトを記述しておく方法も使えます。
上記のように記述すれば、ページ全体の読込完了を待たずに、すぐにカーソルが入ります。
※記述上の注意：
この「タイプ２」の方法で記述する場合は、指定の入力欄を作るinput要素よりも後にスクリプトを記述して下さい。対象のinput要素よりも前に上記のスクリプトを記述してしまうと、「指定のIDは存在しない」というエラーになってしまいます。
前のスレッド ：学校や病院の食育指導に！食べ物の... || 次のスレッド ：IPアドレスとは何だろう...