素のJavaScriptで入力文字数の表示と制限（textareaタグとinputタグ）

入力文字数に制限を設けたい場合に素のJavaScriptで実装する方法をご紹介します。

保存ボタンなどを押したときに初めて文字数オーバーに気付くよりも、その前に気付かせてあげた方が当然親切です。非常に簡単に実装できるので、できれば配慮しましょう。

入力文字数の表示と制限のデモ

10文字を超えるとエラー表示になるデモです。

入力文字数の表示と制限のコードと解説

HTML

<p class="desc">10文字以上入力してみてください。</p>
<textarea id="demo" cols="30" rows="3"></textarea>
<p id="text-length">0文字</p>

CSS

#demo.err{
    background-color: #fff6f6;
    border: 1px solid #ffa3a3;
}
#text-length>span{
   margin-left: 10px;
   color: #d11a1a;
   font-weight: bold;
}

JavaScript

const textArea = document.getElementById('demo');
const text_length = document.getElementById('text-length');
if(textArea){
   textArea.addEventListener('keyup', function(){
      let count = textArea.value.length;
      if (count <= 10){
         if(textArea.classList.contains('err')){
            textArea.classList.remove('err');
         }
         text_length.innerHTML = count + '文字';
      }else{
         textArea.classList.add('err');
         text_length.innerHTML = count + '文字<span>"文字数オーバーです"</span>';
      }
   });
}

keyupイベントは、キーが離れた時に発動するイベントです。キーが離れた時にtextareaの文字数をカウントし、その文字数が10文字以下なら文字数だけ表示、10文字を超えたらspanタグで囲った「文字数オーバーです」という文言を付加しています。
spanタグで囲うことでその部分のCSSを変えています。

まとめ

冒頭述べた通りですが、保存ボタンなどを押したときに初めて文字数オーバーに気付くよりも、その前に気付かせてあげた方が当然親切です。非常に簡単に実装できるので、できれば配慮しましょう。