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

指定の入力欄に自動でカーソルを入れる方法

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

メッセージ送信フォームやアンケートフォームなど、アクセス者に何らかの文字を入力してもらうページでは、 先頭の入力欄に最初からカーソルが入っていると便利です。 マウスを使って、わざわざ入力欄をクリックする手間が省けるからです。

先頭の入力欄に最初からカーソルが入っていると便利
▲先頭の入力欄に最初からカーソルが入っていると便利

特定の入力欄に最初からカーソルを入れておくようにする方法は、JavaScriptを使うと簡単に実現できます。 記述するJavaScriptは、たったの1行です。

指定の入力欄にカーソルを入れるには

記述する内容をまずは簡単にだけご紹介いたします。 記述手順は以下の通りです。

  1. 入力欄にidを割り振る
  2. スクリプトを1行書く

[STEP.1] 入力欄にidを割り振る

まずは、カーソルを自動で入れたい入力欄に、id属性を使ってID名を加えます。例えば、以下のようにします。 (※ここでは、「firstinput」というID名にしています。)

<input type="text" id="firstinput">

[STEP.2] スクリプトを1行書く

次に、先ほどのID名を持った要素にフォーカスを与えるようJavaScriptを記述します。

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

記述するのは、たったこれだけです。
これで、「firstinput」というID名を付加した入力欄にカーソルを自動で入れることができます。
※入力欄ではなくボタンやチェックボックスの場合は、選択状態になります。

上記の説明だけでは具体的にどう記述するのかが分かりにくいので、次のページではもっと具体的な活用例(ソース)を使ってご紹介いたします。

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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