入力内容をリアルタイム表示するテキストボックスの作り方

無料ツール

テキストボックスを自由に作成

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

テキストボックス作成ツールを使う

新しいタブで開きます

テキストボックスに入力した文字を、別の表示エリアへリアルタイムで表示する方法を紹介します。文字を入力するたびに表示内容が更新されるため、ボタンを押したり、ページを再読み込みしたりする必要はありません。

今回のデモでは、名前を入力すると、下に配置されたプロフィールカードの名前部分へ即座に反映されます。文字を追加・削除すると表示も連動して変わり、入力欄を空にすると「お名前」という初期表示に戻ります。

この仕組みは、名刺やメッセージカードなど、入力フォームと完成イメージを連動させるUIにも応用できます。JavaScriptで入力内容を取得し、指定した要素の文字を更新することで実現しています。

今回は1行入力のテキストボックスを使用していますが、複数行入力できるテキストエリアでも同じ仕組みを利用できます。テキストエリアへの変更方法は、下記の「ファイル構成と設置方法」で説明します。

デモ

名前を入力してください

リアルタイムプレビュー

PROFILE

お名前

テキストボックスに名前を入力すると、下のプロフィールカードに入力内容がリアルタイムで反映されます。文字を追加・削除すると表示も更新され、入力欄を空にすると「お名前」に戻ります。

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

<!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-live-preview_container">

    <!-- 名前を入力するテキストボックス -->
    <label class="textbox-live-preview_label" for="textbox-live-preview-name">
      名前を入力してください
    </label>
    <input class="textbox-live-preview_input" id="textbox-live-preview-name" type="text" placeholder="例：山田 太郎" autocomplete="off">

    <!-- 入力内容をリアルタイムで表示するエリア -->
    <div class="textbox-live-preview_heading">リアルタイムプレビュー</div>

    <!-- プロフィールカード -->
    <div class="textbox-live-preview_card">
      <p class="textbox-live-preview_card-label">PROFILE</p>
      <!-- JavaScriptで入力内容を書き換える要素 -->
      <p class="textbox-live-preview_card-name" id="textbox-live-preview-display" aria-live="polite">お名前</p>
    </div>

  </div>

  <!-- 入力内容をリアルタイムで表示するJavaScriptを読み込む -->
  <script src="script.js"></script>
</body>
</html>

/* =========================================
  入力欄とプロフィールカード全体
========================================= */

.textbox-live-preview_container {
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 680px; /* 最大横幅。大きくすると全体が横に広がる */
  margin: 40px auto; /* 上下40pxの余白。左右は自動調整して中央に配置する */
  padding: 36px; /* 内側の余白。大きくすると内容と枠線の間隔が広がる */
  border: 1px solid #dbe5f1; /* 外枠。1pxを大きくすると線が太くなる */
  border-radius: 18px; /* 角丸。大きくすると丸みが強くなる */
  background: #f8fafc; /* 全体の背景色 */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
  font-family: sans-serif; /* 全体のフォント */
}

/* =========================================
  テキストボックスのラベル
========================================= */

.textbox-live-preview_label {
  display: block; /* ラベルを1行分の領域として表示する */
  margin-bottom: 10px; /* 下余白。大きくすると入力欄との間隔が広がる */
  color: #111827; /* 文字色 */
  font-size: 16px; /* 文字サイズ。大きくすると文字が大きくなる */
  font-weight: 700; /* 文字の太さ。大きくすると太くなる */
}

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

.textbox-live-preview_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに広げる */
  padding: 16px; /* 内側の余白。大きくすると入力欄が広くなる */
  border: 2px solid #dbe5f1; /* 枠線。2pxを大きくすると太くなる */
  border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
  background: #ffffff; /* 入力欄の背景色 */
  color: #111827; /* 入力文字の色 */
  font-size: 16px; /* 入力文字のサイズ */
  line-height: 1.5; /* 行の高さ。大きくすると上下の間隔が広がる */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
  outline: none; /* ブラウザ標準のフォーカス枠を非表示にする */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 枠線と影の変化を0.2秒で滑らかにする */
}

/* 入力例の文字色 */
.textbox-live-preview_input::placeholder {
  color: #94a3b8; /* プレースホルダーの文字色 */
}

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

/* =========================================
  プレビューの見出し
========================================= */

.textbox-live-preview_heading {
  margin: 28px 0 12px; /* 上28px・左右0・下12pxの余白 */
  color: #64748b; /* 文字色 */
  font-size: 14px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
}

/* =========================================
  プロフィールカード
========================================= */

.textbox-live-preview_card {
  padding: 28px 24px; /* 上下28px・左右24pxの内側余白 */
  border: 1px solid #dbe5f1; /* 枠線。1pxを大きくすると太くなる */
  border-radius: 14px; /* 角丸。大きくすると丸みが強くなる */
  background: #ffffff; /* カードの背景色 */
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05); /* カードの影。6pxは下方向、20pxはぼかしの広がり */
  text-align: center; /* カード内の文字を中央揃えにする */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
}

/* カード上部のPROFILE表示 */
.textbox-live-preview_card-label {
  margin: 0 0 12px; /* 上左右0・下12pxの余白 */
  color: #64748b; /* 文字色 */
  font-size: 13px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
  letter-spacing: 0.08em; /* 文字間隔。大きくすると文字の間が広がる */
}

/* 入力内容を表示する名前部分 */
.textbox-live-preview_card-name {
  margin: 0; /* ブラウザ標準の余白をなくす */
  color: #1d4ed8; /* 名前の文字色 */
  font-size: 26px; /* 名前の文字サイズ */
  font-weight: 700; /* 名前の文字の太さ */
  line-height: 1.6; /* 行の高さ */
  overflow-wrap: anywhere; /* 長い文字列もカード内で折り返す */
}

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

@media (max-width: 640px) {

  /* 画面幅640px以下では全体の余白を小さくする */
  .textbox-live-preview_container {
    padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
  }

  /* スマートフォンで入力欄の余白を調整する */
  .textbox-live-preview_input {
    padding: 14px; /* 内側の余白 */
  }

  /* スマートフォンでカードの余白を調整する */
  .textbox-live-preview_card {
    padding: 24px 16px; /* 上下24px・左右16pxの内側余白 */
  }

  /* スマートフォンで名前の文字サイズを調整する */
  .textbox-live-preview_card-name {
    font-size: 22px; /* 名前の文字サイズ */
  }

}

/* =========================================
  テキストボックスの入力内容をリアルタイム表示
========================================= */

(function() {

  // 名前を入力するテキストボックスを取得する
  const input = document.getElementById("textbox-live-preview-name");

  // 入力内容を表示するプロフィールカードの要素を取得する
  const display = document.getElementById("textbox-live-preview-display");

  // 入力内容に合わせてプロフィールカードを更新する
  function updatePreview() {

    // テキストボックスに入力された文字を取得する
    const value = input.value;

    // 入力がある場合はその文字を表示し、空欄なら「お名前」を表示する
    display.textContent = value || "お名前";

  }

  // 文字の入力・削除が行われるたびに表示を更新する
  input.addEventListener("input", updatePreview);

  // ページを開いたときにも現在の入力内容を反映する
  updatePreview();

})();

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

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

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

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

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

ファイル構成と設置方法

今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLでは名前を入力するテキストボックスとプロフィールカードを配置し、CSSでは入力欄やカードの外観を整えています。JavaScriptでは入力された文字列を取得し、文字の入力・削除に合わせてプロフィールカードの表示内容をリアルタイムで更新しています。

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

各ファイルの役割
index.htmlには、名前を入力するinput要素、項目名を示すlabel要素、入力内容を表示するプロフィールカードを記述しています。style.cssでは、入力欄の横幅・余白・枠線・角丸や、プロフィールカードの背景色・文字サイズなどを設定しています。script.jsでは、入力内容の取得と表示の更新を行っています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと、名前の入力欄とプロフィールカードが表示されます。
テキストボックスに名前を入力すると、プロフィールカードの「お名前」が入力した文字に切り替わります。文字を追加・削除すると表示も連動して更新され、入力欄を空にすると「お名前」に戻ります。

入力欄と表示先を取得する方法
script.jsでは、document.getElementById()を使用して、テキストボックスとプロフィールカードの表示先を取得しています。
今回のHTMLでは、入力欄にid="textbox-live-preview-name"、表示先にid="textbox-live-preview-display"を設定しています。

// 名前を入力するテキストボックスを取得する
const input = document.getElementById("textbox-live-preview-name");

// 入力内容を表示するプロフィールカードの要素を取得する
const display = document.getElementById("textbox-live-preview-display");

inputにはテキストボックスの要素、displayにはプロフィールカード内の名前を表示する要素が入ります。JavaScriptで要素を取得するため、HTML側のIDとgetElementById()に指定する文字列は一致させてください。

入力した文字列を取得して表示する仕組み
テキストボックスに入力された文字列は、valueプロパティで取得できます。今回のscript.jsでは、input.valueで取得した文字列を変数valueへ代入し、textContentでプロフィールカードの表示内容を書き換えています。

// 入力内容に合わせてプロフィールカードを更新する
function updatePreview() {

  // テキストボックスに入力された文字を取得する
  const value = input.value;

  // 入力がある場合はその文字を表示し、空欄なら「お名前」を表示する
  display.textContent = value || "お名前";

}

input.valueで取得される値は文字列（string）です。例えば「山田太郎」と入力すると、変数valueには"山田太郎"が入ります。何も入力されていない場合は空文字列""になります。
display.textContentは、指定した要素の文字を変更するためのプロパティです。value || "お名前"によって、入力内容がある場合はその文字を表示し、空欄の場合は「お名前」を表示しています。
初期表示の文字を変更したい場合は、index.htmlのtextbox-live-preview-displayに記述した「お名前」と、script.jsの"お名前"を同じ文字列に変更してください。

入力内容をリアルタイムで更新する方法
文字を入力・削除するたびに表示を更新するため、inputイベントを使用しています。addEventListener()で入力欄にイベントを登録し、入力内容が変更されるたびにupdatePreview()を実行します。

// 文字の入力・削除が行われるたびに表示を更新する
input.addEventListener("input", updatePreview);

// ページを開いたときにも現在の入力内容を反映する
updatePreview();

inputイベントは、文字の入力や削除などによって入力欄の値が変更されたときに発生します。そのため、更新ボタンを設置しなくても、入力操作に合わせてプロフィールカードの表示を変更できます。
最後のupdatePreview();は、ページを開いたときにも表示を更新するための処理です。入力欄にあらかじめ文字が設定されている場合は、その内容をプロフィールカードへ反映できます。

入力した文字列を取得する場所
テキストボックスに入力された文字列は、script.jsのupdatePreview()関数内で取得しています。input.valueが現在の入力内容を取得する部分で、取得した文字列を変数valueへ代入しています。

// テキストボックスに入力された文字を取得する
const value = input.value;

例えば「山田太郎」と入力されている場合、変数valueには"山田太郎"が入ります。何も入力されていない場合は空文字列""になります。
取得した文字列は、同じ関数内のdisplay.textContentでプロフィールカードに表示しています。入力内容を別の処理にも利用したい場合は、updatePreview()関数内で変数valueを使用してください。
inputイベントによって文字の入力・削除が行われるたびに関数が実行されるため、変数valueには毎回最新の入力内容が代入されます。

テキストエリアへ変更する方法
今回は1行入力のテキストボックスを使用していますが、複数行入力できるテキストエリアでも同じ仕組みを利用できます。変更する場合は、index.htmlのinput要素をtextarea要素へ置き換えます。
変更前のHTMLは次のとおりです。

<!-- 名前を入力するテキストボックス -->
<input class="textbox-live-preview_input" id="textbox-live-preview-name" type="text" placeholder="例：山田 太郎" autocomplete="off">

複数行入力に変更する場合は、次のように書き換えます。

<!-- 複数行入力できるテキストエリア -->
<textarea class="textbox-live-preview_input" id="textbox-live-preview-name" rows="4" placeholder="名前やメッセージを入力してください" autocomplete="off"></textarea>

textarea要素にはtype="text"を指定しません。rows="4"は表示する行数の目安で、数値を変更すると入力欄の初期の高さを調整できます。
textareaでも入力内容はvalueプロパティで取得でき、inputイベントで文字の入力・削除を検知できます。IDを変更しなければ、script.jsを書き換える必要はありません。
また、同じtextbox-live-preview_inputクラスを指定しているため、掲載しているCSSの枠線・文字色・余白などの基本スタイルを引き継げます。

テキストエリアの高さとサイズ変更を調整する方法
テキストエリアの高さを指定し、利用者によるサイズ変更を縦方向だけに制限したい場合は、style.cssの末尾に次のCSSを追加します。

/* =========================================
  テキストエリアへ変更した場合の追加設定
========================================= */

textarea.textbox-live-preview_input {
  min-height: 120px; /* 最小の高さ。大きくすると入力欄が縦に広がる */
  resize: vertical; /* 縦方向のみサイズ変更を許可する */
}

min-height: 120px;はテキストエリアの最小の高さを指定しています。160pxにすると入力欄が縦に広がり、80pxにするとコンパクトになります。
resize: vertical;では、利用者がテキストエリアの高さだけを変更できます。サイズ変更を禁止したい場合はresize: none;に変更してください。

テキストエリアの改行をプロフィールカードへ反映する方法
テキストエリアでは改行を含む文字列を入力できますが、今回のプロフィールカードでは、CSSの初期設定のままだと改行がそのまま表示されません。
入力した改行もプロフィールカードへ反映したい場合は、style.cssの.textbox-live-preview_card-nameにwhite-space: pre-wrap;を追加します。

/* =========================================
  入力内容を表示する名前部分
========================================= */

.textbox-live-preview_card-name {
  margin: 0; /* ブラウザ標準の余白をなくす */
  color: #1d4ed8; /* 名前の文字色 */
  font-size: 26px; /* 名前の文字サイズ */
  font-weight: 700; /* 名前の文字の太さ */
  line-height: 1.6; /* 行の高さ */
  overflow-wrap: anywhere; /* 長い文字列もカード内で折り返す */
  white-space: pre-wrap; /* テキストエリアで入力した改行を表示する */
}

white-space: pre-wrap;を指定すると、テキストエリアで入力した改行や連続する空白を表示先にも反映できます。長い文章は表示領域の横幅に合わせて折り返されるため、複数行のメッセージをリアルタイムで確認する場合にも利用できます。
なお、このCSSはテキストエリアへ変更する場合の追加設定です。今回の1行入力のテキストボックスでは、追加する必要はありません。

プロフィールカードのデザインを変更する方法
style.cssの.textbox-live-preview_cardでは、カードの余白・枠線・角丸・背景色・影などを設定しています。入力内容を表示する文字は.textbox-live-preview_card-nameで調整できます。

/* =========================================
  入力内容を表示する名前部分
========================================= */

.textbox-live-preview_card-name {
  margin: 0; /* ブラウザ標準の余白をなくす */
  color: #1d4ed8; /* 名前の文字色 */
  font-size: 26px; /* 名前の文字サイズ */
  font-weight: 700; /* 名前の文字の太さ */
  line-height: 1.6; /* 行の高さ */
  overflow-wrap: anywhere; /* 長い文字列もカード内で折り返す */
}

font-size: 26px;は表示文字のサイズです。32pxにすると大きく、20pxにすると小さくなります。color: #1d4ed8;を変更すると文字色を調整できます。
また、text-align: center;は.textbox-live-preview_cardに設定されているため、入力内容は中央揃えで表示されます。左揃えに変更したい場合はtext-align: left;に書き換えてください。

レスポンシブ対応
style.cssでは、親要素の.textbox-live-preview_containerにwidth: 100%;とmax-width: 680px;を設定しています。これにより、広い画面では最大680pxまで表示し、狭い画面では設置先の横幅に合わせて縮小します。
margin: 40px auto;で中央に配置し、上下に40pxの余白を設けています。max-widthの数値を変更すると、入力欄とプロフィールカード全体の最大横幅を調整できます。

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

@media (max-width: 640px) {

  /* 画面幅640px以下では全体の余白を小さくする */
  .textbox-live-preview_container {
    padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
  }

  /* スマートフォンで入力欄の余白を調整する */
  .textbox-live-preview_input {
    padding: 14px; /* 内側の余白 */
  }

  /* スマートフォンでカードの余白を調整する */
  .textbox-live-preview_card {
    padding: 24px 16px; /* 上下24px・左右16pxの内側余白 */
  }

  /* スマートフォンで名前の文字サイズを調整する */
  .textbox-live-preview_card-name {
    font-size: 22px; /* 名前の文字サイズ */
  }

}

画面幅が640px以下になると、全体の内側余白を上下36pxから24px、左右36pxから18pxへ変更します。入力欄の余白は16pxから14px、プロフィールカードの名前の文字サイズは26pxから22pxに調整しています。
PCとスマートフォンで同じ文字サイズや余白を使用したい場合は、メディアクエリ内の数値を変更してください。入力内容が長くなる場合やテキストエリアへ変更する場合は、両方の画面幅で表示を確認しながら調整してください。