ページを開くとテキストボックスへ自動フォーカスする方法

1行入力・複数行入力の切り替えや、ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

ログイン画面を開いたとき、ログインIDやメールアドレスの入力欄に自動的にカーソルが表示され、すぐに文字を入力できることがあります。このように、ページを開いた時点で特定の入力欄が選択された状態になる機能を自動フォーカスといいます。

今回は、JavaScriptを使わず、HTMLだけでテキストボックスへ自動フォーカスする方法を紹介します。デモでは1行入力のテキストフィールドを使用し、通常の入力欄との違いや、ページを再読み込みしたときの動作を確認できます。複数行入力に対応したテキストエリアへの設定方法は「ファイル構成と設置方法」で解説します。

自動フォーカスを設定すると、利用者が入力欄をクリックする手間を省き、すぐに文字を入力できるようになります。入力欄へのスクロール位置や移動時の動きも調整したい場合は、「ページを開くと入力欄へ自動フォーカス・スクロールするテキストボックスの作り方」でJavaScriptを使用した方法を紹介しています。

デモ

お名前（自動フォーカス）

メールアドレス

通常はページを開いた時点で、上の「お名前」入力欄に自動的にフォーカスされます。動作を確認するには、下の「メールアドレス」入力欄をクリックしてフォーカスを移し、「動作を再確認する」ボタンを押してください。ページを再読み込みしたときの動作を再現し、「お名前」入力欄へ自動的にフォーカスされる様子を確認できます。。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>テキストボックスの自動フォーカス</title>
  <!-- 入力フォームのCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 入力フォーム全体 -->
  <div class="textbox-auto-focus_form">

    <!-- 自動フォーカスする入力欄 -->
    <div class="textbox-auto-focus_group">

      <!-- お名前入力欄のラベル -->
      <label class="textbox-auto-focus_label" for="textbox-auto-focus-name">
        お名前（自動フォーカス）
      </label>

      <!-- ページを開いたときに自動フォーカスするテキストボックス -->
      <input class="textbox-auto-focus_input" id="textbox-auto-focus-name" name="name" type="text" placeholder="お名前を入力してください。" autofocus="">

    </div>

    <!-- 通常の入力欄 -->
    <div class="textbox-auto-focus_group">

      <!-- メールアドレス入力欄のラベル -->
      <label class="textbox-auto-focus_label" for="textbox-auto-focus-email">
        メールアドレス
      </label>

      <!-- autofocus属性を設定しない通常のテキストボックス -->
      <input class="textbox-auto-focus_input" id="textbox-auto-focus-email" name="email" type="email" placeholder="メールアドレスを入力してください。">

    </div>

  </div>

</body>
</html>

/* =========================================
  入力フォーム全体
========================================= */

.textbox-auto-focus_form {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 480px; /* 入力フォームの最大横幅。大きくするとフォームが横に広がる */
  margin: 40px auto; /* 上下40pxの余白を設け、左右中央に配置する */
  box-sizing: border-box; /* 余白や枠線を横幅に含める */
}

/* =========================================
  入力欄ごとのグループ
========================================= */

.textbox-auto-focus_group {
  margin-bottom: 28px; /* 入力欄同士の間隔。大きくすると上下の間隔が広がる */
}

.textbox-auto-focus_group:last-child {
  margin-bottom: 0; /* 最後の入力欄には下余白を付けない */
}

/* =========================================
  入力欄のラベル
========================================= */

.textbox-auto-focus_label {
  display: block; /* ラベルを独立した行に表示する */
  margin-bottom: 10px; /* ラベルと入力欄の間隔。大きくすると間隔が広がる */
  color: #111827; /* ラベルの文字色 */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ。大きくすると太くなる */
}

/* =========================================
  テキストボックス本体
========================================= */

.textbox-auto-focus_input {
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 14px 16px; /* 上下14px・左右16pxの内側余白 */
  border: 2px solid #cbd5e1; /* 枠線。2pxを大きくすると枠線が太くなる */
  border-radius: 10px; /* 角丸。大きくすると丸みが強くなる */
  background: #ffffff; /* 入力欄の背景色 */
  color: #111827; /* 入力文字の色 */
  font-size: 16px; /* 入力文字のサイズ。大きくすると文字が大きくなる */
  line-height: 1.5; /* 行の高さ。大きくすると文字の上下間隔が広がる */
  box-sizing: border-box; /* 枠線と内側余白を横幅に含める */
  outline: none; /* ブラウザ標準のアウトラインを非表示にする */
}

/* =========================================
  フォーカス時の表示
========================================= */

.textbox-auto-focus_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); /* 入力欄の外側に青い影を表示。4pxを大きくすると影が広がる */
}

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下では入力欄の余白を調整する */
  .textbox-auto-focus_input {
    padding: 13px 14px; /* 上下13px・左右14pxの内側余白 */
  }

}

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

今回のサンプルは、HTMLとCSSの2つのファイルで構成されています。HTMLのautofocus属性を使用することで、ページを開いたときに指定したテキストボックスへ自動的にフォーカスできます。JavaScriptを使用せず、1行入力のテキストフィールドと通常の入力欄を組み合わせたシンプルな構成です。

sample/
  ├── index.html
  └── style.css

各ファイルの役割
index.htmlには、自動フォーカスする「お名前」の入力欄と、通常の「メールアドレス」の入力欄を記述しています。style.cssでは、入力フォームの横幅・配置・余白・枠線・文字サイズ・フォーカス時の表示などを設定しています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.htmlとstyle.cssを同じ階層に配置し、index.htmlをブラウザで開くと、最初から「お名前」の入力欄にフォーカスされた状態になります。
index.htmlを開くと、「お名前」の入力欄へ自動的にフォーカスされ、すぐに文字を入力できます。

autofocus属性で自動フォーカスする仕組み
index.htmlでは、最初にフォーカスさせたい「お名前」のinput要素にautofocus属性を設定しています。

<!-- ページを開いたときに自動フォーカスするテキストボックス -->
<input class="textbox-auto-focus_input" id="textbox-auto-focus-name" name="name" type="text" placeholder="お名前を入力してください。" autofocus="">

autofocusは、ページを読み込んだときに指定した要素へ自動的にフォーカスするHTMLの属性です。autofocus=""を記述するだけで有効になり、JavaScriptでフォーカスを設定する必要はありません。
今回はtype="text"を指定しているため、1行入力のテキストフィールドが対象です。ページを開くと入力欄にカーソルが表示され、クリックせずに文字を入力できます。

一方、「メールアドレス」の入力欄にはautofocus属性を設定していません。

<!-- autofocus属性を設定しない通常のテキストボックス -->
<input class="textbox-auto-focus_input" id="textbox-auto-focus-email" name="email" type="email" placeholder="メールアドレスを入力してください。">

自動フォーカスする入力欄を「メールアドレス」に変更したい場合は、index.htmlの「お名前」からautofocus=""を削除し、「メールアドレス」のinput要素へ追加してください。
同じページ内で複数の入力欄にautofocusを設定すると、通常は最初に指定された入力欄が対象になります。意図しない動作を避けるため、自動フォーカスする要素は1つに限定してください。

テキストエリアへ自動フォーカスする方法
autofocus属性は、1行入力のテキストフィールドだけでなく、複数行入力に対応したtextarea要素にも設定できます。
例えば、お問い合わせフォームのメッセージ入力欄を最初から入力できる状態にしたい場合は、次のように記述します。

<!-- 複数行入力のテキストエリアへ自動フォーカスする例 -->
<label class="textbox-auto-focus_label" for="textbox-auto-focus-message">
  お問い合わせ内容
</label>
<textarea class="textbox-auto-focus_input" id="textbox-auto-focus-message" name="message" rows="5" placeholder="お問い合わせ内容を入力してください。" autofocus=""></textarea>

textarea要素にもautofocus=""を追加するだけで、ページを開いたときに自動的にフォーカスされます。rows="5"は入力欄の表示行数を指定する属性で、数値を大きくすると表示領域が縦に広がり、小さくすると狭くなります。
このコードはテキストエリアへの応用例であり、ダウンロードするZIPには含まれていません。実際に使用する場合は、index.htmlの入力欄を置き換えるか、新しく追加してください。また、同じページにある「お名前」のautofocus属性は削除し、テキストエリアだけに設定してください。

入力した値を取得する方法
自動フォーカスは入力開始時の状態を設定する機能であり、入力された文字列の取得方法は通常のテキストボックスと変わりません。
「お名前」の入力欄に入力した値は、JavaScriptからvalueプロパティを使用して取得できます。次のコードは値の取得方法を説明するための例であり、ダウンロードするZIPには含まれていません。

// お名前の入力欄を取得
const nameInput = document.getElementById("textbox-auto-focus-name");

// 入力された文字列を変数へ代入
const nameValue = nameInput.value;

document.getElementById()で対象の入力欄を取得し、nameInput.valueを変数nameValueへ代入しています。取得される値は文字列で、未入力の場合は空文字列になります。
このコードは実行した時点の入力値を取得します。使用する場合は、index.htmlの</body>の直前に<script>要素を追加し、その中へ記述してください。入力後の値を取得したい場合は、入力が行われた後に処理を実行する必要があります。
「メールアドレス」の値を取得する場合は、getElementById()に指定するIDをtextbox-auto-focus-emailへ変更します。テキストエリアも同様にvalueプロパティで入力内容を取得できます。

入力フォームの横幅とフォーカス時の表示
style.cssでは、入力フォームの最大横幅を480pxに設定し、ページの中央へ配置しています。

/* =========================================
  入力フォーム全体
========================================= */

.textbox-auto-focus_form {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 480px; /* 入力フォームの最大横幅。大きくするとフォームが横に広がる */
  margin: 40px auto; /* 上下40pxの余白を設け、左右中央に配置する */
  box-sizing: border-box; /* 余白や枠線を横幅に含める */
}

max-width: 480px;を大きくすると入力フォームが横に広がり、小さくするとコンパクトになります。margin: 40px auto;の40pxは上下の余白で、autoによって左右中央に配置しています。
入力欄の高さは、.textbox-auto-focus_inputのpadding: 14px 16px;で調整できます。上下の14pxを大きくすると入力欄が縦に広がり、左右の16pxを変更すると文字と枠線の間隔が変わります。

また、自動フォーカスされた入力欄は、次のCSSによって枠線と外側の影が青色に変化します。

/* =========================================
  フォーカス時の表示
========================================= */

.textbox-auto-focus_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); /* 入力欄の外側に青い影を表示。4pxを大きくすると影が広がる */
}

:focusは、入力欄にフォーカスされているときだけ適用されるCSSの疑似クラスです。border-colorを変更すると枠線の色を調整でき、box-shadowの4pxを大きくすると外側の影が広がります。
この装飾は自動フォーカスだけでなく、利用者が入力欄をクリックしてフォーカスした場合にも適用されます。

レスポンシブ対応
style.cssでは、入力フォームにwidth: 100%;とmax-width: 480px;を設定しているため、PCでは最大480pxの横幅で表示し、画面が狭くなると親要素の横幅に合わせて縮小します。
また、画面幅が640px以下の場合は、メディアクエリによって入力欄の内側余白を変更しています。

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下では入力欄の余白を調整する */
  .textbox-auto-focus_input {
    padding: 13px 14px; /* 上下13px・左右14pxの内側余白 */
  }

}

通常は上下14px・左右16pxの余白ですが、画面幅が640px以下になると上下13px・左右14pxに変更されます。これにより、スマートフォンでは入力欄の内側余白を少し狭くして表示します。
なお、autofocusはページを開いたときにフォーカスを設定する属性ですが、ページ内の入力欄の位置やブラウザの動作によっては、自動的にスクロールする場合があります。自動フォーカスの利用は、ページの構成や利用者の操作を妨げないか確認したうえで設定してください。