PR

【コピペ可】文字数制限のかかったいい感じのtextareaを作る方法

HTML/CSSを学ぶ

こんにちは。今回はtextareaタグをいい感じにする方法を紹介します。

作るものの確認

文字数制限 + それが分かりやすいように右下に表示をします。制限文字数を超えると赤くなってユーザーが気づきやすくしています。

コードは以下の通り。JavaScriptはscriptタグで埋め込んでも、外部ファイルとして読み込んでも構いません。

index.html
<div class="TextareaWrapper">
  <textarea
    aria-label="お問い合わせ内容"
    name="お問い合わせ内容"
    maxlength="400"
    id="textarea"
    class="Textarea"
  ></textarea>
  <div class="CharCounter" id="charCounter"></div>
</div>
style.css
.TextareaWrapper {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.Textarea {
  padding: 10px;
  width: 100%;
  height: 200px;
  resize: none;
}

.CharCounter {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
script.js
const textarea = document.getElementById("textarea")
const maxLength = textarea.getAttribute("maxlength")
const charCounter = document.getElementById("charCounter")
charCounter.textContent = `0 / ${maxLength}`
textarea.addEventListener("input", () => {
  const currentLength = textarea.value.length
  charCounter.textContent = `${currentLength} / ${maxLength}`

  if (currentLength > maxLength) {
    charCounter.style.color = "red"
  } else {
    charCounter.style.removeProperty("color")
  }
})

解説

見た目を作る

まずは見た目を作りましょう。今回はtextareaの右下に文字数カウンターを置きます。

一旦テキストエリアを置きますが、そのまま配置せずに親要素を用意しておきましょう。

<div class="TextareaWrapper">
  <textarea
    aria-label="お問い合わせ内容"
    name="お問い合わせ内容"
    id="textarea"
    class="Textarea"
  ></textarea>
</div>
.TextareaWrapper {
  width: 100%;
  max-width: 400px;
}

.Textarea {
  padding: 10px;
  width: 100%;
  height: 200px;
  resize: none;
}

この時点ではシンプルなテキストエリアですね(下参照)。

続いて文字数をカウントする部分です。重ねる表現になっているので、position: absolute; を使って配置します。

textareaタグと並列に配置し、親要素となるTextareaWrapperをposition: relative; にすることで基準点とします。

<div class="TextareaWrapper">
  <textarea
    aria-label="お問い合わせ内容"
    name="お問い合わせ内容"
    id="textarea"
    class="Textarea"
  ></textarea>
  <div class="CharCounter" id="charCounter">0 / 200</div> <!-- 追加 -->
</div>
.TextareaWrapper {
  position: relative; // 追加
  width: 100%;
  max-width: 400px;
}

.Textarea {
  // 省略
}

.CharCounter {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
0 / 200

見た目はこれでOKです。

文字数制限を設定する

文字数制限ですが、textareaには標準でmaxlength属性というものがあります。これに最大文字数を設定すると、textareaからフォーカスを外した時にそれより多く入力された分は自動で削除されるようになります。

この属性を使って、文字数を表示する機能を作っていきましょう。早速maxlength属性を追加します。

<div class="TextareaWrapper">
  <!-- maxlength属性を追加 -->
  <textarea
    aria-label="お問い合わせ内容"
    name="お問い合わせ内容"
    maxlength="200"
    id="textarea"
    class="Textarea"
  ></textarea>
  <div class="CharCounter" id="charCounter">0 / 200</div>
</div>

この時点で最低限の文字数制限機能が付きましたが、やはりこれだけではユーザーには分かりにくいので文字数カウンター機能を動かしていきましょう。

今回実装する機能は、

  • textareaのmaxlength属性の値を取得して、文字数カウンターの分母にする
  • textareaに文字が入力されるたびにその時点での文字数を取得して文字数カウンターの分子にする
  • 見た目で分かりやすいよう、制限文字数を超えた時は文字数カウンターの文字を赤くする

です。それでは必要な要素の取得を行いましょう。

// textarea要素を取得する
const textarea = document.getElementById("textarea") 

// textareaのmaxlengthの値を取得する
const maxLength = textarea.getAttribute("maxlength") 

// 文字数カウンター部分の要素を取得する
const charCounter = document.getElementById("charCounter") 

続いて文字が入力されるたびに文字数カウンターを更新するようにしましょう。

// 「textareaに文字が入力されるたび」を設定
textarea.addEventListener("input", () => {

  // その時点での文字数を取得する 
  const currentLength = textarea.value.length 

  // 「現在文字数 / 最大文字数」というテキストを作って文字数カウンター要素に入れる
  charCounter.textContent = `${currentLength} / ${maxLength}` 
})

textareaにはinputイベントがあり、文字が入力されるたびにinputイベントに設定したコードが実行されます。よって毎回文字数を取得し文字数カウンターが更新されます。

この時点では以下の状態。

0 / 200

では色が変わるようにしましょう。今設定したinputイベントに対する処理に追加します。

textarea.addEventListener("input", () => {
  const currentLength = textarea.value.length 
  charCounter.textContent = `${currentLength} / ${maxLength}` 
  
  // ここから追加
  if (currentLength > maxLength) {
    charCounter.style.color = "red"
  } else {
    charCounter.style.removeProperty("color")
  }
})

現在文字数が最大文字数を超えたら赤にして、そうでない時は元に戻します。

200文字に達してからさらに文字を入力すると文字が赤くなりますね。

最後に、細かい話ですが初期の文字数カウンターの表示をmaxlengthを使って表示するようにしましょう。最大文字数が変わったときに変更する場所がmaxlength属性だけで済みます。

<div class="TextareaWrapper">
  <textarea
    aria-label="お問い合わせ内容"
    name="お問い合わせ内容"
    maxlength="400"
    id="textarea"
    class="Textarea"
  ></textarea>
  <div class="CharCounter" id="charCounter"></div> <!-- テキストを削除 -->
</div>
const textarea = document.getElementById("textarea")
const maxLength = textarea.getAttribute("maxlength")
const charCounter = document.getElementById("charCounter")

charCounter.textContent = `0 / ${maxLength}` // 追加

textarea.addEventListener("input", () => {
  // 省略
})

これで完成です!

この記事を書いた人
小林 秀樹

Web制作フリーランス9年目|ディレクター・フロントエンドエンジニア
「世界一初心者に優しい」→セカヤサ。

コーポレートサイトやLP、メディア立ち上げまで幅広く対応。コーディングを軸に、UX設計・SEOライティング・サイト運用まで一貫対応。

法律系オウンドメディア立ち上げ支援では、特定のキーワードでのSEO1位を実現し問い合わせ獲得に貢献。また大手専門学校サイトの大規模リニューアル(100ページ超)でのディレクションと実装の両面の経験あり。

最近では、AIツールによる自社サービスUI制作や、ChatGPTを活用した記事執筆フローの構築など、AI時代に対応した制作手法の実践にも注力している。

zenn:
https://zenn.dev/hideki_climax

制作実績:
https://tan-band-c66.notion.site/37abe7077b184b338fd8f53f6873ca1d

小林 秀樹をフォローする
HTML/CSSを学ぶJavaScriptを学ぶ
スポンサーリンク
シェアする
小林 秀樹をフォローする

コメント

タイトルとURLをコピーしました