テキスト入力欄に最初からカーソルを入れる(フォーカスを与える)と便利

ログインフォームのように、何らかの文字入力が必要なページを表示する場合には、最初から入力欄(テキスト入力フォーム)の中にカーソルが入っていると便利です。わざわざマウスで入力欄をクリックしなくても、そのままキーボードで入力可能になりますから。
特定の入力欄にカーソルを入れる(入力欄にフォーカスする)には、以下のようにJavaScriptを記述します。

(対象の要素).focus();

対称の要素に対して、focusメソッドを実行するだけです。
対称の要素を特定する方法にはいくつかありますが、例えば以下のように記述できます。

▼特定のid名を持った入力欄にフォーカスを与えたい場合：

document.getElementById('指定のid名').focus();

getElementByIdメソッドを使って、指定のid名を持つ要素を特定した上で、focusメソッドを実行しています。
この書き方が最も使い勝手が良いかなと思います。

▼form要素内に含まれる特定のname属性の値を持った入力欄にフォーカスを与えたい場合：

document.(フォームのname属性値).(対象のname属性値).focus();

上記での「フォームのname属性値」はform要素に付けたname属性の値のことです。「対象のname属性値」はinput要素に付けたname属性の値のことです。

どちらにしても、focusメソッドを使う点は同じです。
具体的な記述例をこの後に紹介します。

特定のテキスト入力欄にフォーカスを与えるJavaScriptソースの記述例

特定のテキスト入力欄にフォーカスを与える(＝カーソルを自動で入れる)方法として、id名を使う場合とフォームのname属性値を使う場合との書き方を以下に紹介しておきます。

特定のid名を持った入力欄にフォーカスを与えるJavaScriptの書き方

例えば、以下のようなHTMLソースで入力欄が作成されているとします。

入力欄: <input type="text" value="" id="sakura">

input要素を使って1行のテキスト入力欄を作っており、id属性に値「sakura」を指定してあります。
このid属性値を使って対象を特定します。
以下のようにJavaScriptソースを記述すると、上記の入力欄にフォーカスが移動します。

document.getElementById('sakura').focus();

とても簡単です。

フォーム内の特定のname属性値を持った入力欄にフォーカスを与えるJavaScriptの書き方

例えば、以下のような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();

この書き方だとform要素に含まれている要素しか特定できません。しかし、別途id名を割り振っておく必要がないので、入力フォームによってはこちらの書き方の方が楽な場合もあるかも知れません。

ボタンクリックで入力欄にフォーカスを与えるJavaScriptの動作例

実行サンプルは以下の通りです。
ボタンをクリックすると、どこにフォーカスがあっても入力欄Aにカーソルが移動します。

なお、ここではテキスト入力欄だけを対象にして紹介しましたが、フォーカス先は何も入力欄だけではなく、チェックボックスやラジオボタン、その他のボタンなども指定できます。

ページの読み込みと同時にフォーカスを移動するよりも、入力欄が生成できた直後にフォーカスする方が望ましい

ウェブページの読み込みが完了してから特定の入力欄にフォーカスを与える(＝カーソルを入れる)ような仕組みを設けているウェブサイトをたまに見かけますが、これは逆に不便です。

ユーザは、ウェブページの読み込み完了を待ってから操作するとは限りません。ページが終わりまで読み込まれるよりも前に、目的の入力欄が目に入った時点でその入力欄に入力を始めようとするでしょう。
そのような場合、「ウェブページの読み込みが完了した時点」では、「まさに入力中」であるか「既に入力を終えて他の操作をしようとしている」場合があります。そのようなタイミングで、特定の入力欄に強制的にフォーカスを移動してしまうと、ユーザの作業が中断されてしまって激しく困ります。

なので、特定の入力欄にフォーカスを与えておきたいのであれば、それは「ウェブページの読み込み完了時」ではなく、「入力欄を生成した直後」である方が望ましいでしょう。
例えば以下のような感じでHTML＋JavaScriptソースを記述します。

<p>
   入力欄: <input type="text" value="" id="sakura">
</p>

上記では2行目でテキスト入力欄を作っています。その直後に記述したJavaScript(6行目)で、そのテキスト入力欄にフォーカスを与えています。
ウェブページのonloadイベントなどで実行するよりも、この方がテキスト入力欄が見えた次の瞬間にフォーカスできるので望ましいでしょう。

ただ、この入力欄が1画面目として見える範囲よりも下にある場合、ブラウザの画面が強制的にスクロールしてしまいますから、それはそれで不便な可能性もあります。
このような仕組みは、ログインページなど「その入力欄しか存在しない」と言っても過言ではないくらいのページで使うだけに留めておく方が良さそうな気もします。

(更新日：2017年06月09日)