ページを開くと入力欄へ自動フォーカス・スクロールするテキストボックスの作り方

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

ページを開いたときに、テキストボックスへ自動的にフォーカスし、入力欄の位置までスクロールする方法を紹介します。ページを移動してきたときや再読み込みしたときに、入力欄へカーソルが表示され、クリックしなくてもすぐに文字を入力できる状態になります。

今回は、JavaScriptを使用して、ページの表示に合わせて入力欄へ自動フォーカスする仕組みを作成します。入力欄が画面の下部に配置されている場合でも、自動スクロールによって入力欄が見える位置まで移動するため、利用者がフォームを探す必要がありません。入力した名前は通常のテキストボックスと同じように取得でき、フォームの送信やJavaScriptの処理などに利用できます。

デモでは、「動作を確認する」ボタンをクリックすると、別のページから移動してきたときや再読み込みしたときの動作を再現できます。実際にページを移動することなく、デモ内が入力フォームまで自動スクロールし、テキストボックスにカーソルが表示される様子を確認できます。

スクロール位置や移動時の動きを細かく調整する必要がなく、入力欄への自動フォーカスだけを簡単に設定したい場合は、「ページを開くとテキストボックスへ自動フォーカスする方法」で、JavaScriptを使わずHTMLだけで実装する方法を紹介しています。

デモ

「動作を確認する」をクリックすると、別のページから移動してきたときや、ページを再読み込みしたときの動作を再現できます。実際にページを移動することなく、デモ内が入力フォームまで自動スクロールし、テキストフィールドにカーソルが表示されます。

お名前の入力について

お問い合わせフォームや会員登録フォームでは、利用者の名前を入力する項目がよく使用されます。名前を入力してもらうことで、送信された内容が誰からのものなのかを確認できます。

入力項目がページの下部に配置されている場合、利用者はフォームの位置を探してスクロールする必要があります。

ページを開いたときに入力欄へ自動的にフォーカスする仕組みを使用すると、目的の入力欄へすぐに移動でき、そのまま文字を入力できます。

次の入力フォームでは、お名前を入力するテキストフィールドを用意しています。上部の「動作を確認する」をクリックして、フォームまで移動する様子を確認してください。

お名前を入力

入力欄へ自動的にフォーカスします。

お名前

「動作を確認する」をクリックすると、デモ内が入力フォームまで自動スクロールし、「お名前」のテキストフィールドへフォーカスします。実際に別ページへ移動することなく、ページ移動後に入力欄へ自動フォーカスする動作を確認できます。

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

<!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">
  <!-- 自動フォーカスのJavaScriptを読み込む -->
  <script src="script.js" defer></script>
</head>
<body>

  <!-- ページ上部のコンテンツを配置する場所 -->
  <!-- 入力欄までのスクロールを確認できるように高さを確保 -->
  <div class="autofocus-text-box_content"></div>

  <!-- 自動フォーカスする入力フォーム -->
  <div class="autofocus-text-box_form">

    <!-- 入力欄のラベル -->
    <label class="autofocus-text-box_label" for="autofocus-text-box-name">
      お名前
    </label>

    <!-- ページ表示時に自動フォーカスするテキストボックス -->
    <input class="autofocus-text-box_input" id="autofocus-text-box-name" name="name" type="text" placeholder="お名前を入力してください。">

  </div>

</body>
</html>

/* =========================================
  ページ上部のコンテンツ領域
========================================= */

.autofocus-text-box_content {
  min-height: 100vh; /* 入力欄までのスクロールを確認するための高さ */
}

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

.autofocus-text-box_form {
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 480px; /* 入力フォームの最大横幅 */
  margin: 0 auto 120px; /* 左右中央配置。下側に120pxの余白を確保 */
  padding: 24px; /* フォーム内側の余白 */
  box-sizing: border-box; /* 余白を横幅に含める */
}

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

.autofocus-text-box_label {
  display: block; /* ラベルを独立した行に表示する */
  margin-bottom: 10px; /* 入力欄との間隔 */
  color: #111827; /* 文字色 */
  font-size: 16px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
  line-height: 1.5; /* 行の高さ */
}

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

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

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

.autofocus-text-box_input:focus {
  border-color: #2563eb; /* フォーカス時の枠線色 */
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); /* 入力欄の外側に青い影を表示 */
}

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

@media (max-width: 640px) {

  .autofocus-text-box_form {
    padding: 18px; /* 画面幅640px以下では内側の余白を狭くする */
  }

  .autofocus-text-box_input {
    padding: 13px 14px; /* スマートフォンでの入力欄の余白 */
  }

}

/* =========================================
  ページ表示時に自動フォーカス・スクロール
========================================= */

// HTMLから対象のテキストボックスを取得
const autofocusTextBoxInput = document.getElementById("autofocus-text-box-name");

// ページの読み込み完了後に実行
window.addEventListener("load", function() {

  // 対象のテキストボックスが存在する場合のみ実行
  if (!autofocusTextBoxInput) return;

  // 入力欄へフォーカスし、自動スクロールは一度抑制する
  autofocusTextBoxInput.focus({
    preventScroll: true
  });

  // 入力欄が画面の中央付近に来るようにスクロール
  autofocusTextBoxInput.scrollIntoView({
    behavior: "smooth", // 滑らかにスクロールする
    block: "center" // 入力欄を画面の中央付近に配置する
  });

});

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

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

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

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

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

ファイル構成と設置方法

今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLではページ下部にテキストボックスを配置し、CSSでは入力欄の外観やフォームの横幅を設定しています。JavaScriptでは、ページの読み込み完了後に入力欄へフォーカスし、その位置まで滑らかにスクロールする処理を行います。

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

各ファイルの役割
index.htmlには、ページ上部のコンテンツ領域と「お名前」のテキストボックスを記述しています。style.cssでは、フォームの最大横幅・余白・枠線・フォーカス時の表示などを設定しています。script.jsでは、ページの読み込み完了を検知し、入力欄への自動フォーカスとスクロールを実行します。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開きます。
ページを開くと、下部に配置された「お名前」のテキストボックスへ自動的にスクロールし、入力欄にカーソルが表示されます。そのまま文字を入力できます。

自動フォーカスとスクロールの仕組み
script.jsでは、window.addEventListener("load", ...)を使用して、ページの読み込みが完了したタイミングで処理を実行しています。
次のコードでは、getElementById()で対象のテキストボックスを取得し、focus()で入力できる状態にしたあと、scrollIntoView()で入力欄までスクロールしています。

// HTMLから対象のテキストボックスを取得
const autofocusTextBoxInput = document.getElementById("autofocus-text-box-name");

// ページの読み込み完了後に実行
window.addEventListener("load", function() {

  // 対象のテキストボックスが存在する場合のみ実行
  if (!autofocusTextBoxInput) return;

  // 入力欄へフォーカスし、自動スクロールは一度抑制する
  autofocusTextBoxInput.focus({
    preventScroll: true
  });

  // 入力欄が画面の中央付近に来るようにスクロール
  autofocusTextBoxInput.scrollIntoView({
    behavior: "smooth", // 滑らかにスクロールする
    block: "center" // 入力欄を画面の中央付近に配置する
  });

});

focus()は、指定した入力欄へフォーカスするメソッドです。preventScroll: trueを指定すると、フォーカスによって発生する自動スクロールを抑制できます。そのあとにscrollIntoView()を実行することで、スクロールの動きを個別に設定しています。
behavior: "smooth"は滑らかにスクロールする設定です。瞬時に移動させたい場合は"instant"へ変更できます。

スクロール後の表示位置を変更する方法
入力欄を画面のどの位置に表示するかは、script.jsのblockで指定しています。

  // 入力欄が画面の中央付近に来るようにスクロール
  autofocusTextBoxInput.scrollIntoView({
    behavior: "smooth", // 滑らかにスクロールする
    block: "center" // 入力欄を画面の中央付近に配置する
  });

block: "center"は、入力欄を画面の中央付近に配置する設定です。"start"に変更すると画面上部、"end"に変更すると画面下部を基準に配置します。
ただし、ページの長さやスクロールできる範囲によっては、指定した位置まで移動できない場合があります。例えば、ページ下部に十分な余白がない場合、"center"を指定しても入力欄が中央に配置されるとは限りません。

ブラウザのスクロール位置復元について
ブラウザには、ページを再読み込みしたときや別のページから戻ってきたときに、以前のスクロール位置を復元する機能があります。そのため、2回目以降の表示では、最初から入力欄が見える位置に復元され、スクロールの動きが確認できない場合があります。
今回のコードでは、ブラウザのスクロール位置復元を無効にする処理は追加していません。通常のブラウザ操作を妨げず、ページ読み込み時に入力欄へフォーカスする仕組みを使用しています。

テキストエリアに変更する方法
自動フォーカスする対象は、1行入力のテキストボックスだけでなく、複数行入力できるテキストエリアにも変更できます。
index.htmlにある次のinput要素を変更します。

<!-- ページ表示時に自動フォーカスするテキストボックス -->
<input class="autofocus-text-box_input" id="autofocus-text-box-name" name="name" type="text" placeholder="お名前を入力してください。">

複数行入力できるテキストエリアに変更する場合は、次のようにtextarea要素へ置き換えます。

<!-- ページ表示時に自動フォーカスするテキストエリア -->
<textarea class="autofocus-text-box_input" id="autofocus-text-box-name" name="name" rows="5" placeholder="内容を入力してください。"></textarea>

id="autofocus-text-box-name"を変更しなければ、script.jsを修正せずに同じ自動フォーカス・スクロール処理を利用できます。
rows="5"はテキストエリアの表示行数を指定しています。数値を大きくすると表示行数が増え、小さくすると減ります。また、textarea要素ではtype="text"属性は使用しません。
既存の.autofocus-text-box_inputをそのまま使用できるため、CSSの基本的なデザインも引き継がれます。

入力した値を取得する方法
テキストボックスに入力された内容は、JavaScriptのvalueプロパティで取得できます。
次のコードは値の取得方法を説明するための例であり、ダウンロードするZIPには含まれていません。

// テキストボックスの要素を取得
const textBox = document.getElementById("autofocus-text-box-name");

// 入力された値を変数へ代入
const inputValue = textBox.value;

document.getElementById()で対象の入力欄を取得し、textBox.valueを変数inputValueへ代入しています。取得される値は文字列です。
このコードを利用する場合は、入力が完了したタイミングなど、値を取得したい処理の中に記述してください。例えば、ボタンのクリックイベント内で実行すると、その時点で入力されている内容を取得できます。
テキストエリアに変更した場合も、同じvalueプロパティで入力内容を取得できます。

フォームの横幅と余白の調整
style.cssの.autofocus-text-box_formでは、フォーム全体の横幅と余白を設定しています。

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

.autofocus-text-box_form {
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 480px; /* 入力フォームの最大横幅 */
  margin: 0 auto 120px; /* 左右中央配置。下側に120pxの余白を確保 */
  padding: 24px; /* フォーム内側の余白 */
  box-sizing: border-box; /* 余白を横幅に含める */
}

max-width: 480px;を大きくするとフォームの最大横幅が広がり、小さくすると狭くなります。padding: 24px;はフォーム内側の余白です。
margin: 0 auto 120px;では、左右を中央に配置し、フォームの下側に120pxの余白を確保しています。下余白を増やすと、ページ下部でも入力欄を中央付近へスクロールさせやすくなります。ただし、表示位置は画面の高さやページ全体の長さによって変わります。

レスポンシブ対応
フォームにはwidth: 100%;とmax-width: 480px;を設定しているため、画面幅に合わせて横幅が変化します。さらに、画面幅が640px以下になると、次のメディアクエリで余白を調整します。

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

@media (max-width: 640px) {

  .autofocus-text-box_form {
    padding: 18px; /* 画面幅640px以下では内側の余白を狭くする */
  }

  .autofocus-text-box_input {
    padding: 13px 14px; /* スマートフォンでの入力欄の余白 */
  }

}

PCではフォームの内側に24pxの余白を設け、画面幅640px以下では18pxに変更しています。入力欄の余白も、PCの上下14px・左右16pxから、スマートフォンでは上下13px・左右14pxに調整しています。
自動フォーカスとスクロールのJavaScriptは、PC・スマートフォンで共通です。