テキストボックスの入力文字数をリアルタイムでカウント｜文字数に応じたメッセージを表示

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

テキストボックスに入力した文字数をリアルタイムでカウントし、現在の文字数と残り文字数を表示する方法を紹介します。文字を入力・削除するたびにカウントが更新され、入力文字数に応じてメッセージの内容や色も自動的に切り替わります。

今回のデモでは、最大入力文字数を30文字に設定しています。0～9文字では赤色で「もう少し詳しく入力してください。」、10～24文字ではオレンジ色で「入力を続けてください。」、25～30文字では緑色で「十分な文字数が入力されています。」と表示します。文字を削除すると、現在の文字数に合わせてメッセージも前の段階に戻ります。

文字数の取得やメッセージの切り替えにはJavaScriptを使用しています。この仕組みは1行入力のテキストボックスだけでなく、複数行入力できるテキストエリアにも応用できます。テキストエリアへの変更方法については、下記の「ファイル構成と設置方法」で説明します。

デモ

お問い合わせ内容

現在の文字数：0文字残り文字数：30文字

もう少し詳しく入力してください。

テキストボックスに文字を入力すると、現在の文字数と残り文字数がリアルタイムで更新されます。入力文字数が0～9文字では赤色、10～24文字ではオレンジ色、25～30文字では緑色のメッセージに切り替わります。最大30文字まで入力でき、文字を削除すると残り文字数も増加します。

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

<!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-character-count_demo">

    <!-- 文字数をカウントする入力欄。maxlengthで最大30文字に制限する -->
    <label class="textbox-character-count_label" for="textbox-character-count-input">
      お問い合わせ内容
    </label>
    <input class="textbox-character-count_input" id="textbox-character-count-input" type="text" maxlength="30" placeholder="30文字以内で入力してください。" aria-describedby="textbox-character-count-counter textbox-character-count-message">

    <!-- 現在の文字数と残り文字数 -->
    <p class="textbox-character-count_counter" id="textbox-character-count-counter">
      <span>
        現在の文字数：<span class="textbox-character-count_number" id="textbox-character-count-number">0</span>文字
      </span>
      <span>
        残り文字数：<span class="textbox-character-count_remaining" id="textbox-character-count-remaining">30</span>文字
      </span>
    </p>

    <!-- 文字数に応じて変化するメッセージ -->
    <p class="textbox-character-count_message is-short" id="textbox-character-count-message" aria-live="polite">
      もう少し詳しく入力してください。
    </p>

  </div>

  <!-- 文字数カウントとメッセージ切り替えのJavaScriptを読み込む -->
  <script src="script.js"></script>
</body>
</html>

/* =========================================
  文字数カウント全体
========================================= */

.textbox-character-count_demo {
  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-character-count_demo * {
  box-sizing: border-box;
}

/* =========================================
  入力欄
========================================= */

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

/* テキストボックス */
.textbox-character-count_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; /* 行の高さ */
  outline: none; /* ブラウザ標準のフォーカス枠を非表示にする */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 枠線と影の変化を0.2秒で滑らかにする */
}

/* プレースホルダーの文字色 */
.textbox-character-count_input::placeholder {
  color: #94a3b8;
}

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

/* =========================================
  文字数カウント
========================================= */

/* 現在の文字数と残り文字数の表示 */
.textbox-character-count_counter {
  display: flex; /* 2つのカウントを横並びにする */
  justify-content: space-between; /* 左右に振り分ける */
  gap: 12px; /* カウント同士の間隔 */
  margin: 12px 0 0; /* 上12px・左右と下0の余白 */
  color: #475569; /* 文字色 */
  font-size: 14px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
}

/* 現在の文字数と残り文字数の数字 */
.textbox-character-count_number,
.textbox-character-count_remaining {
  color: #2563eb; /* 数字の文字色 */
  font-size: 18px; /* 数字の文字サイズ */
}

/* =========================================
  メッセージ表示
========================================= */

/* メッセージ共通 */
.textbox-character-count_message {
  margin: 24px 0 0; /* 上24px・左右と下0の余白 */
  padding: 14px 16px; /* 上下14px・左右16pxの内側余白 */
  border: 1px solid transparent; /* メッセージの枠線 */
  border-radius: 10px; /* 角丸 */
  font-size: 14px; /* 文字サイズ */
  font-weight: 700; /* 文字の太さ */
  line-height: 1.7; /* 行の高さ */
  transition: background-color 0.2s ease, color 0.2s ease; /* 背景色と文字色を0.2秒で切り替える */
}

/* 0～9文字：赤色のメッセージ */
.textbox-character-count_message.is-short {
  border-color: #fecaca; /* 枠線色 */
  background: #fef2f2; /* 背景色 */
  color: #b91c1c; /* 文字色 */
}

/* 10～24文字：オレンジ色のメッセージ */
.textbox-character-count_message.is-progress {
  border-color: #fed7aa; /* 枠線色 */
  background: #fff7ed; /* 背景色 */
  color: #c2410c; /* 文字色 */
}

/* 25～30文字：緑色のメッセージ */
.textbox-character-count_message.is-complete {
  border-color: #bbf7d0; /* 枠線色 */
  background: #f0fdf4; /* 背景色 */
  color: #15803d; /* 文字色 */
}

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

@media (max-width: 640px) {

  /* 画面幅640px以下で全体の余白を調整する */
  .textbox-character-count_demo {
    margin: 24px auto; /* 上下24px・左右中央 */
    padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
  }

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

  /* カウント表示が収まらない場合は折り返す */
  .textbox-character-count_counter {
    flex-wrap: wrap;
  }

}

/* =========================================
  文字数カウントとメッセージ切り替え
========================================= */

(function() {

  // 文字数をカウントするテキストボックスを取得する
  const input = document.getElementById("textbox-character-count-input");

  // 現在の文字数と残り文字数の表示先を取得する
  const counter = document.getElementById("textbox-character-count-number");
  const remaining = document.getElementById("textbox-character-count-remaining");

  // 文字数に応じて表示するメッセージの要素を取得する
  const message = document.getElementById("textbox-character-count-message");

  // HTMLのmaxlength属性から最大文字数を取得する
  const maxLength = input.maxLength;

  // 入力文字数に応じてカウントとメッセージを更新する
  function updateCharacterCount() {

    // テキストボックスに入力されている現在の文字数を取得する
    const length = input.value.length;

    // 最大文字数から現在の文字数を引いて残り文字数を計算する
    const remainingCount = maxLength - length;

    // 現在の文字数と残り文字数を表示する
    counter.textContent = length;
    remaining.textContent = remainingCount;

    // 前回のメッセージに設定された状態クラスを解除する
    message.classList.remove("is-short", "is-progress", "is-complete");

    // 0～9文字の場合は赤色のメッセージを表示する
    if (length < 10) {

      message.textContent = "もう少し詳しく入力してください。";
      message.classList.add("is-short");

    // 10～24文字の場合はオレンジ色のメッセージを表示する
    } else if (length < 25) {

      message.textContent = "入力を続けてください。";
      message.classList.add("is-progress");

    // 25文字以上の場合は緑色のメッセージを表示する
    } else {

      message.textContent = "十分な文字数が入力されています。";
      message.classList.add("is-complete");

    }

  }

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

  // ページを開いたときにも初期状態を反映する
  updateCharacterCount();

})();

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

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

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

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

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

ファイル構成と設置方法

入力文字数のカウントには、HTMLのmaxlength属性とJavaScriptのlengthプロパティを使用しています。HTMLで入力欄と文字数の表示領域を用意し、CSSで入力欄やメッセージの外観を設定しています。JavaScriptでは現在の文字数と残り文字数を計算し、文字数に応じてメッセージの文章と色を切り替えています。

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

各ファイルの役割
index.htmlには、最大30文字のテキストボックス、現在の文字数と残り文字数を表示する要素、メッセージの表示領域を記述しています。style.cssでは、入力欄のサイズ・枠線・余白や、文字数に応じて変化するメッセージの背景色・文字色などを設定しています。script.jsでは、入力文字数の取得、残り文字数の計算、メッセージの切り替えを行っています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと、文字数カウント付きのテキストボックスが表示されます。
テキストボックスに文字を入力すると、現在の文字数と残り文字数が更新されます。0～9文字では赤色、10～24文字ではオレンジ色、25～30文字では緑色のメッセージが表示されます。文字を削除すると、現在の文字数に応じたメッセージへ戻ります。

入力文字数と残り文字数を計算する仕組み
script.jsでは、document.getElementById()を使用して入力欄と文字数の表示先を取得しています。テキストボックスに入力された文字列はinput.valueで取得でき、.lengthを付けると現在の文字数を数値として取得できます。
最大文字数はinput.maxLengthで取得し、現在の文字数を引くことで残り文字数を計算しています。

// HTMLのmaxlength属性から最大文字数を取得する
const maxLength = input.maxLength;

// テキストボックスに入力されている現在の文字数を取得する
const length = input.value.length;

// 最大文字数から現在の文字数を引いて残り文字数を計算する
const remainingCount = maxLength - length;

// 現在の文字数と残り文字数を表示する
counter.textContent = length;
remaining.textContent = remainingCount;

例えば「こんにちは」と入力すると、input.valueには文字列"こんにちは"が入り、lengthには数値5が入ります。最大文字数が30の場合、remainingCountは25になります。
counter.textContentには現在の文字数、remaining.textContentには残り文字数を代入しており、HTMLの各表示領域に計算結果が反映されます。
取得した入力文字列や文字数を別の処理で利用したい場合は、updateCharacterCount()関数内でinput.valueや変数lengthを使用できます。なお、.lengthはUTF-16コード単位で数えるため、一部の絵文字などは見た目の1文字が2以上として数えられる場合があります。

最大入力文字数を変更する方法
最大入力文字数は、index.htmlのinput要素に指定したmaxlength="30"で設定しています。例えば50文字まで入力できるようにする場合は、maxlength="50"に変更します。

<!-- 文字数をカウントする入力欄。maxlengthで最大30文字に制限する -->
<label class="textbox-character-count_label" for="textbox-character-count-input">
  お問い合わせ内容
</label>
<input class="textbox-character-count_input" id="textbox-character-count-input" type="text" maxlength="30" placeholder="30文字以内で入力してください。" aria-describedby="textbox-character-count-counter textbox-character-count-message">

maxlengthを50に変更すると、JavaScriptが取得する最大文字数も50になり、残り文字数の計算に反映されます。HTMLに記述している残り文字数の初期表示「30」と、プレースホルダーの「30文字以内で入力してください。」も合わせて変更してください。
なお、最大入力文字数とメッセージの切り替え条件は別の設定です。50文字に変更しても、メッセージの判定条件を変更しなければ25文字以上で緑色になります。

文字数に応じてメッセージを切り替える仕組み
メッセージの切り替えには、JavaScriptのif・else if・elseを使用しています。まずclassList.remove()で前回の状態クラスを解除し、現在の文字数に応じてメッセージの文章と状態クラスを設定しています。

// 前回のメッセージに設定された状態クラスを解除する
message.classList.remove("is-short", "is-progress", "is-complete");

// 0～9文字の場合は赤色のメッセージを表示する
if (length < 10) {

  message.textContent = "もう少し詳しく入力してください。";
  message.classList.add("is-short");

// 10～24文字の場合はオレンジ色のメッセージを表示する
} else if (length < 25) {

  message.textContent = "入力を続けてください。";
  message.classList.add("is-progress");

// 25文字以上の場合は緑色のメッセージを表示する
} else {

  message.textContent = "十分な文字数が入力されています。";
  message.classList.add("is-complete");

}

length < 10は10文字未満、length < 25は前の条件に当てはまらない10～24文字を判定しています。それ以外の25文字以上では、緑色のメッセージを表示します。
切り替える文字数を変更したい場合は、script.jsの10と25を調整してください。例えば、最初の条件をlength < 15にすると、赤色のメッセージが表示される範囲は0～14文字になります。2つ目の条件をlength < 30にすると、オレンジ色のメッセージは15～29文字、緑色のメッセージは30文字以上になります。
メッセージの文章は各条件内のmessage.textContentで変更できます。初期表示の文章を変更する場合は、index.htmlのメッセージ部分も合わせて変更してください。

メッセージの色を変更する方法
メッセージの色はstyle.cssで設定しています。JavaScriptで追加されるis-short・is-progress・is-completeの状態クラスに応じて、背景色・文字色・枠線色が切り替わります。

/* 0～9文字：赤色のメッセージ */
.textbox-character-count_message.is-short {
  border-color: #fecaca; /* 枠線色 */
  background: #fef2f2; /* 背景色 */
  color: #b91c1c; /* 文字色 */
}

/* 10～24文字：オレンジ色のメッセージ */
.textbox-character-count_message.is-progress {
  border-color: #fed7aa; /* 枠線色 */
  background: #fff7ed; /* 背景色 */
  color: #c2410c; /* 文字色 */
}

/* 25～30文字：緑色のメッセージ */
.textbox-character-count_message.is-complete {
  border-color: #bbf7d0; /* 枠線色 */
  background: #f0fdf4; /* 背景色 */
  color: #15803d; /* 文字色 */
}

border-colorは枠線色、backgroundは背景色、colorは文字色を指定しています。例えば、赤色のメッセージを別の色に変更したい場合は、.textbox-character-count_message.is-shortの各色を変更してください。
メッセージ全体の内側余白は.textbox-character-count_messageのpadding: 14px 16px;で設定しています。最初の14pxは上下、16pxは左右の余白で、数値を大きくするとメッセージ内の余白が広がります。

文字の入力・削除に合わせて表示を更新する方法
現在の文字数・残り文字数・メッセージは、inputイベントによって更新しています。addEventListener()で入力欄にイベントを登録し、入力内容が変わるたびにupdateCharacterCount()を実行しています。

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

// ページを開いたときにも初期状態を反映する
updateCharacterCount();

inputイベントは文字の入力や削除によって入力欄の値が変わったときに発生します。そのため、更新ボタンを設置する必要はありません。
最後のupdateCharacterCount();は、ページを開いたときにも文字数とメッセージの状態を反映するための処理です。

テキストエリアへ変更する方法
今回の文字数カウントは、複数行入力できるテキストエリアでも使用できます。変更する場合は、index.htmlのinput要素をtextarea要素へ置き換えます。
変更前のHTMLは次のとおりです。

<input class="textbox-character-count_input" id="textbox-character-count-input" type="text" maxlength="30" placeholder="30文字以内で入力してください。" aria-describedby="textbox-character-count-counter textbox-character-count-message">

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

<textarea class="textbox-character-count_input" id="textbox-character-count-input" rows="4" maxlength="30" placeholder="30文字以内で入力してください。" aria-describedby="textbox-character-count-counter textbox-character-count-message"></textarea>

textarea要素にはtype="text"を指定しません。rows="4"は表示する行数の目安で、数値を大きくすると入力欄の初期の高さが広がります。
テキストエリアでもvalueとmaxLengthを使用できるため、IDを変更しなければscript.jsを変更する必要はありません。また、同じtextbox-character-count_inputクラスを指定しているため、既存のCSSも適用されます。
テキストエリアでは改行も文字数に含まれます。改行を含む文章を入力する場合は、最大文字数に余裕を持たせてください。

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

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

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

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

レスポンシブ対応
style.cssでは、全体の.textbox-character-count_demoにwidth: 100%;とmax-width: 680px;を設定しています。広い画面では最大680pxまで表示し、狭い画面では設置先の横幅に合わせて縮小します。
margin: 40px auto;で左右中央に配置し、上下に40pxの余白を設けています。最大横幅を変更したい場合は、max-widthの数値を調整してください。

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

@media (max-width: 640px) {

  /* 画面幅640px以下で全体の余白を調整する */
  .textbox-character-count_demo {
    margin: 24px auto; /* 上下24px・左右中央 */
    padding: 24px 18px; /* 上下24px・左右18pxの内側余白 */
  }

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

  /* カウント表示が収まらない場合は折り返す */
  .textbox-character-count_counter {
    flex-wrap: wrap;
  }

}

画面幅が640px以下になると、全体の上下余白は40pxから24px、内側余白は36pxから上下24px・左右18pxに変更されます。入力欄の内側余白も16pxから14pxへ小さくなります。
また、flex-wrap: wrap;によって、現在の文字数と残り文字数が横幅に収まらない場合は折り返して表示されます。PCとスマートフォンで同じ余白を使用したい場合は、メディアクエリ内の数値を調整してください。