ホームページ作成/Webサイトのユーザビリティ

指定の入力欄に自動でカーソルを入れる方法(2ページ目)

メッセージ送信フォームなどのように、アクセス者に何らかの文字を入力してもらうページでは、先頭の入力欄に最初からカーソルが入っていると便利です。指定の入力欄に自動的にカーソルを入れる方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

指定の入力欄にカーソルを入れる具体的なソース

■HTML部分:

まずは、以下のようなHTMLがあるとします。 入力欄が3つあります。 (input要素による1行入力欄が2つと、textarea要素による複数行入力欄が1つ)

お名前: <input type="text" size="30" name="name"><br>
メール: <input type="text" size="30" name="mail"><br>
コメント: <textarea name="comment" cols="30" rows="5"></textarea><br>

このうち、先頭の入力欄(ここでは「お名前」欄)に自動的にカーソルを入れたい場合を考えます。 そこで、「お名前」欄を作っているinput要素にid属性を追加して、以下のように記述します。

お名前: <input type="text" size="30" name="name" id="firstinput"><br>
メール: <input type="text" size="30" name="mail"><br>
コメント: <textarea name="comment" cols="30" rows="5"></textarea><br>

■JavaScript部分(タイプ1):

指定の入力欄に自動でカーソルを入れるためのJavaScriptは、そのページのbodyタグ内にonload属性を使って以下のようにして記述します。

<body onload="document.getElementById('firstinput').focus();">

body要素のonload属性の値として記述したスクリプトは、ページの読込完了後に実行されます。 つまり、ページ読込が完了したと同時に、指定した入力欄にカーソルが入ることになります。

■JavaScript部分(タイプ2):

上記の場合だと、「ページの読込完了後」にスクリプトが実行されるため、ページ全体の読込完了までに時間がかかるような大きなページでは、カーソルが自動で入るまでにも時間がかかってしまいます。 そのような場合は、入力欄(入力フォーム)のHTMLを記述した直後に、次のようにしてスクリプトを記述しておく方法も使えます。

<script type="text/javascript">
   document.getElementById('firstinput').focus();
</script>

上記のように記述すれば、ページ全体の読込完了を待たずに、すぐにカーソルが入ります。

※記述上の注意:
この「タイプ2」の方法で記述する場合は、指定の入力欄を作るinput要素よりも後にスクリプトを記述して下さい。 対象のinput要素よりも前に上記のスクリプトを記述してしまうと、「指定のIDは存在しない」というエラーになってしまいます。

おわりに

今回は、特定の入力欄に自動でカーソルを入れる方法をご紹介いたしました。 メッセージ送信フォームやアンケートフォームなど、アクセス者に何らかの文字を入力してもらう必要があるページなどでご活用下さい。

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます