Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

入力欄に最初からカーソルを入れる(フォーカスを与える)

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

特定の入力欄にカーソルを入れる(フォーカスする)には、以下のように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にカーソルが移動します。


A:
B:

なお、フォーカス先は入力欄だけでなく、チェックボックスやボタンなども指定できます。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど