入力内容をリアルタイム表示するテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力タイプ・ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

入力内容をリアルタイム表示するテキストフィールドを作る方法

入力内容をリアルタイム表示するテキストフィールドを作る方法を紹介します。テキストフィールドへ入力した文字を、入力と同時に別の表示エリアへ反映できるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、ライブラリを使用せずに導入できます。

入力内容をその場で確認したいフォームや、プロフィール編集画面、お問い合わせフォーム、チャット入力欄、管理画面などで活用できます。文字を入力するたびに表示内容が更新されるため、ユーザーは送信前に内容を確認しながら入力できます。入力欄と表示エリアのレイアウトや色、文字サイズなどはCSSで自由に変更できるため、サイトデザインにも合わせやすい構成です。

デモでは、テキストフィールドへ入力した内容がリアルタイムで下のプレビューエリアへ表示されます。文字を削除すると表示も同時に更新されるため、JavaScriptによるリアルタイム連携の基本的な実装方法を確認できます。初心者でも仕組みを理解しやすく、Webフォームや管理画面などへ応用しやすいサンプルコードです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

リアルタイム入力表示

テキストフィールドへ入力すると下へリアルタイム表示されます。

入力してください

入力内容がここへ表示されます。

テキストフィールドへ文字を入力すると、入力内容が下のプレビューエリアへリアルタイムで表示されます。

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

<!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_wrap">

    <!-- タイトル -->
    <div class="textbox-live-preview_title">
      リアルタイム入力表示
    </div>

    <!-- 説明文 -->
    <p class="textbox-live-preview_text">
      テキストフィールドへ入力すると、下の表示エリアへリアルタイムで反映されます。
    </p>

    <!-- テキストフィールドのラベル -->
    <label
      class="textbox-live-preview_label"
      for="live-preview-input">
      入力してください
    </label>

    <!-- 入力用テキストフィールド -->
    <input
      class="textbox-live-preview_input"
      id="live-preview-input"
      name="live-preview-input"
      type="text"
      placeholder="ここへ入力">

    <!-- 入力内容を表示するエリア -->
    <div
      class="textbox-live-preview_preview"
      id="live-preview-output"
      aria-live="polite">
      入力内容がここへ表示されます。
    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
}

/* リアルタイム表示フォーム全体 */
.textbox-live-preview_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小する */
  max-width:700px; /* 最大横幅。値を大きくすると広く、小さくすると狭くなる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置する */
  padding:32px; /* 内側余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #dbe4f0; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* フォーム全体の背景色 */
  box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
}

/* タイトル */
.textbox-live-preview_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えで表示する */
}

/* 説明文 */
.textbox-live-preview_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えで表示する */
}

/* テキストフィールドのラベル */
.textbox-live-preview_label{
  display:block; /* ラベルを1行で表示する */
  margin-bottom:8px; /* テキストフィールドとの間隔 */
  color:#111827; /* ラベルの文字色 */
  font-size:16px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
  line-height:1.5; /* ラベルの行間 */
}

/* 入力用テキストフィールド */
.textbox-live-preview_input{
  display:block; /* テキストフィールドをブロック要素で表示する */
  width:100%; /* 親要素の横幅いっぱいに表示する */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border:2px solid #cbd5e1; /* 通常時の枠線の太さ・種類・色 */
  border-radius:8px; /* テキストフィールドの角丸 */
  background:#ffffff; /* テキストフィールドの背景色 */
  color:#111827; /* 入力文字の色 */
  font-family:inherit; /* 親要素と同じフォントを使用する */
  font-size:16px; /* 入力文字のサイズ */
  line-height:1.5; /* 入力文字の行間 */
  box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
  outline:none; /* フォーカス時のブラウザ標準の外枠を非表示にする */

  /* 0.3秒で枠線色を切り替える
     値を大きくするとゆっくり、小さくすると速くなる */
  transition:border-color 0.3s ease;
}

/* テキストフィールド入力中 */
.textbox-live-preview_input:focus{
  border-color:#2563eb; /* 入力中の枠線色 */
}

/* プレースホルダー */
.textbox-live-preview_input::placeholder{
  color:#9ca3af; /* プレースホルダーの文字色 */
  opacity:1; /* ブラウザによる透明度の違いをなくす */
}

/* 入力内容の表示エリア */
.textbox-live-preview_preview{
  min-height:64px; /* 最小高さ。値を大きくすると表示エリアが高くなる */
  margin-top:24px; /* テキストフィールドとの間隔 */
  padding:18px; /* 表示エリアの内側余白 */
  border:2px dashed #94a3b8; /* 表示エリアを囲む破線 */
  border-radius:8px; /* 表示エリアの角丸 */
  background:#ffffff; /* 表示エリアの背景色 */
  color:#334155; /* 表示文字の色 */
  font-size:16px; /* 表示文字のサイズ */
  line-height:1.7; /* 表示文字の行間 */
  white-space:pre-wrap; /* 空白と改行を保持して表示する */
  overflow-wrap:anywhere; /* 長い文字列を画面幅に合わせて折り返す */
  box-sizing:border-box; /* paddingと枠線を要素の幅・高さに含める */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ余白を縮小する */
  }

  /* スマートフォン表示時のフォーム全体 */
  .textbox-live-preview_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小する */
    padding:24px 18px; /* 上下24px・左右18pxへ内側余白を縮小する */
  }

}

// 入力用テキストフィールドを取得
const livePreviewInput=
document.getElementById("live-preview-input");

// 入力内容の表示エリアを取得
const livePreviewOutput=
document.getElementById("live-preview-output");

// テキストフィールドへ文字が入力された時
livePreviewInput.addEventListener("input",function(){

  // 入力された文字を取得
  const inputText=livePreviewInput.value;

  // 文字が入力されている場合は入力内容を表示
  if(inputText){

    livePreviewOutput.textContent=inputText;

  }else{

    // 入力欄が空の場合は初期メッセージを表示
    livePreviewOutput.textContent=
    "入力内容がここへ表示されます。";

  }

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは文字を入力するテキストフィールドと、入力内容を表示するエリアを作成します。CSSではフォーム全体、テキストフィールド、入力内容の表示エリアなどのデザインを設定し、JavaScriptではテキストフィールドへの入力を監視して、入力された文字をリアルタイムで表示エリアへ反映します。

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

各ファイルの役割
index.htmlはリアルタイム入力表示フォームを構成するファイルです。タイトル、説明文、ラベル、テキストフィールド、入力内容を表示するエリアを配置しています。表示する文章やプレースホルダーは、このファイルから変更できます。

style.cssはフォーム全体のデザインを設定するファイルです。フォームの横幅や余白、背景色、枠線、角丸のほか、テキストフィールドや入力内容の表示エリアのサイズ・色などを変更できます。

script.jsはテキストフィールドへ入力された文字をリアルタイムで表示するためのファイルです。inputイベントを利用して入力内容を取得し、表示エリアの文字を更新します。テキストフィールドが空になった場合は「入力内容がここへ表示されます。」という初期メッセージへ戻ります。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、追加のライブラリや外部サービスは必要ありません。

表示されたテキストフィールドへ文字を入力すると、入力内容が下の表示エリアへリアルタイムで反映されます。入力した文字をすべて削除すると、表示エリアは初期メッセージへ戻ります。

カスタマイズできる内容
index.htmlでは「リアルタイム入力表示」のタイトル、説明文、「入力してください」のラベル、「ここへ入力」のプレースホルダー、入力欄が空の場合に最初に表示しておく文章を変更できます。用途に合わせて、名前、商品名、タイトルなどの入力確認フォームとして利用できます。

style.cssではフォーム全体の最大横幅、余白、背景色、枠線、角丸、テキストフィールドの文字サイズや枠線色、入力中の枠線色、表示エリアの高さや破線などを変更できます。

script.jsでは、テキストフィールドが空になったときに表示する「入力内容がここへ表示されます。」の文章を変更できます。

数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、小さくすると角が直線的になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。

margin-bottom:8px;
ラベルとテキストフィールドの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

padding:12px 14px;
テキストフィールドの内側余白です。12pxは上下、14pxは左右の余白を表します。値を大きくすると入力文字と枠線の間隔が広がります。

border:2px solid #cbd5e1;
テキストフィールドの通常時の枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:8px;
テキストフィールドと表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:16px;
入力文字や表示文字などの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

transition:border-color 0.3s ease;
テキストフィールドの枠線色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

min-height:64px;
入力内容を表示するエリアの最小高さです。値を大きくすると表示エリアが高くなり、小さくすると低くなります。

margin-top:24px;
テキストフィールドと表示エリアの間隔です。24pxを大きくすると間隔が広がり、小さくすると狭くなります。

padding:18px;
表示エリアの内側余白です。値を大きくすると文字と枠線の間隔が広がり、小さくすると狭くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%;とmax-width:700px;によって、画面幅に合わせてフォーム全体の横幅が縮小されます。

画面幅640px以下では、ページ全体の余白をpadding:24px 12px;、フォーム全体をmargin:24px auto;とpadding:24px 18px;へ変更します。スマートフォンでは左右の余白を抑えながら、タブレットやPCでは最大700pxのフォームとして表示できます。