[js基礎⑥] textareaに文字数カウントをつける。

textareaに文字数カウントをつけたい。

画像のように入力する度に文字数がカウントされる実装。

初見だと悩んでしまう実装ですが、Javascriptを使えば結構簡単に実装できます。
今日は文字数カウント機能についてまとめます。

実装例

早速実装例です。
Resultタブから確認できます。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

文字数を入力する度に右下のカウンターの値が変化。
100文字まで入力できます。

解説

次にコードの解説です。

①HTML
HTMLには、textareaとカウントをさせる場所を作ります。
textareaには、maxlength=”数字”をつけることで簡単に最大値を設定できます。

<div class="container">
  <textarea id="textInput" placeholder="ここに入力してください..." maxlength="100"></textarea>
  <div class="counter">
    <span id="charCount">0</span> / 100
  </div>
</div>

②Javascript
・まず必要な要素を取得/設定します。

const textInput = document.getElementById('textInput');　// textarea
const charCount = document.getElementById('charCount'); //カウント部分
const maxChars = 100;　//最大値の設定

・inputイベントで、入力文字数をカウント
文字が入力されるたびに、textInput.value.lengthで文字数をカウント
その値をcharCountに出力する。

textInput.addEventListener('input', () => {
  const currentLength = textInput.value.length;
  charCount.textContent = currentLength;
});

inputイベントを使うと、入力する度に処理を実行できます。

以上ここまでで文字数カウント機能の実装が完了しました。

まとめ

今回はテキストエリアで文字数カウントを実装する方法について解説しました。

初見だと迷ってしまいますが、意外とコード量も少なく実装できます。

もしも質問などあれば、コメント欄かXのDMよりお気軽にご連絡ください。

Tweets by yuhi1321