Character Counter — 文字数カウンター（Textarea）| コピペ de UI

このコンポーネントについて

テキストエリアへの入力文字数をリアルタイムで表示するコンポーネントです。 SNS投稿フォーム・お問い合わせフォーム・レビュー入力など、文字数に制限を設けたい場面で広く使われます。

残り文字数が上限に近づくとカウンターの色が黄色 → 赤へと変化し、ユーザーに視覚的に知らせます。バニラJavaScriptのみで実装でき、外部ライブラリは不要です。

リアルタイムカウント — 入力のたびに残り文字数を即時更新する
2段階カラー警告 — 残り50文字未満で黄色、残り10文字未満で赤に変化する
ハードリミット — maxlength 属性で上限を超える入力そのものを防ぐ

実装のポイント・注意点

文字数カウンターは textarea の input イベントをリッスンして実装します。 change イベントはフォーカスが外れたときにしか発火しないため、リアルタイム更新には input イベントを使うのがポイントです。

上限文字数は maxlength="200" 属性でブラウザがネイティブに制御します。これにより JS 側では「入力を止める処理」を書く必要がなく、カラー切り替えだけに専念できます。残り文字数は maxlength - textarea.value.length で算出します。

カラーの切り替えは CSS クラスの付け替えで行います。 classList.remove('warn', 'danger') を先に呼んでから条件分岐で add すると、複数クラスが同時に付与されるバグを防げます。カウンター数値の更新は textContent で行い、innerHTML に変数を結合する書き方はXSSのリスクがあるため避けましょう。

HTML・CSS・バニラJavaScriptのみで実装しており、フレームワーク不要でコピペすぐに動きます。

デモ

サンプルソース

3つのファイルを同じフォルダに保存し、index.html をブラウザで開くとすぐに動作確認できます。
ファイル名：index.html / style.css / script.js — 保存時の文字コードは UTF-8 を指定してください（Shift-JISだと日本語が文字化けします）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文字数カウンター サンプル</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="char-counter-wrapper">
  <textarea
    class="char-counter-textarea"
    id="charCounterText"
    maxlength="200"
    placeholder="テキストを入力してください..."
    rows="5"
  ></textarea>
  <div class="char-counter-footer">
    <!-- 残り文字数は JS で更新する -->
    <span class="char-counter-display" id="charCounterDisplay">
      残り <span id="charCounterNum">200</span> / 200文字
    </span>
  </div>
</div>

<script src="./script.js"></script>
</body>
</html>

/* === 文字数カウンター ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-accent:  #2B7FE8; /* フォーカス時のボーダー色 */
  --color-border:  #D0D7E0; /* 通常時のボーダー色 */
  --color-counter: #8A9BAE; /* カウンター通常色 */
  --color-warn:    #E6A817; /* 残り50文字未満の警告色 */
  --color-danger:  #E53E3E; /* 残り10文字未満の危険色 */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 520px;
  margin: 0 auto;
}

.char-counter-wrapper {
  width: 100%;
}

/* テキストエリア本体 */
.char-counter-textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1.6;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.char-counter-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* カウンター表示エリア（右寄せ） */
.char-counter-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* カウンターテキスト — クラスの付け替えで色が変わる */
.char-counter-display {
  font-size: 13px;
  color: var(--color-counter);
  transition: color 0.2s;
}

.char-counter-display.warn   { color: var(--color-warn); }
.char-counter-display.danger { color: var(--color-danger); }

/* スマホ対応 */
@media (max-width: 480px) {
  body { padding: 16px; }
}

var textarea       = document.getElementById('charCounterText');
var counterDisplay = document.getElementById('charCounterDisplay');
var counterNum     = document.getElementById('charCounterNum');
var maxLength      = 200;

// 入力のたびに残り文字数を更新してカラーを切り替える
textarea.addEventListener('input', updateCounter);

function updateCounter() {
  var remaining = maxLength - textarea.value.length;

  // カウンター数値の更新（textContent を使い innerHTML は使わない）
  counterNum.textContent = remaining;

  // warn / danger を一旦両方外してから条件で付け直す
  counterDisplay.classList.remove('warn', 'danger');
  if (remaining < 10) {
    counterDisplay.classList.add('danger');
  } else if (remaining < 50) {
    counterDisplay.classList.add('warn');
  }
}

AI用プロンプト

以下のプロンプトをコピーしてAIに渡すと、同様のコンポーネントを生成できます。

ChatGPTやClaudeにこのプロンプトを渡すと、同様のコンポーネントをゼロから生成・カスタマイズできます。ライブラリ指定や文字数上限の変更など、要件を追記して使うのがおすすめです。

※ このプロンプトを使ってもデモとまったく同じ動作にならない場合があります。AIの解釈や生成タイミングによって差が出ることをご了承ください。

💡 jQuery・Vue・React など特定のライブラリで実装したい場合は、プロンプトの末尾に「〇〇を使って実装してください」と追記してください。

# 文字数カウンター付きテキストエリア 作成依頼

## 概要
テキストエリアに最大入力文字数を設定し、リアルタイムで残り文字数を表示するUIを作成してください。

## 要件
- テキストエリアの最大入力文字数を200文字に設定する
- 入力のたびに残り文字数をリアルタイム更新する（例: 残り 180 / 200文字）
- 残り50文字未満で文字色を黄色に変える
- 残り10文字未満で文字色を赤に変える
- 200文字を超える入力はできないようにする（ハードリミット）
- リセットボタンでテキストと文字数表示を初期状態に戻せる

## 技術仕様
- HTML / CSS / バニラJavaScript で実装
- 外部ライブラリ：なし
- レスポンシブ対応：必要

## 動作詳細
textareaのinputイベントを使って文字数カウンターを更新します。残り文字数が少なくなるにつれて表示色を変えることで、ユーザーが直感的に残り入力量を把握できるようにします。maxlength属性でブラウザネイティブの入力制限を設けることで、超過入力を防ぎます。

## 出力形式
HTML・CSS・JavaScriptを分けて出力してください。
各ファイルは単独でコピー&ペーストして使えるよう記述してください。