JavaScript

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

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

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

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

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

10文字以上入力してみてください。

0文字

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

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を変えています。

まとめ

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

著者のイメージ画像

株式会社BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月に独立後、2024年4月に株式会社BringFlowerを設立。SEOコンサルを活動の軸に据えつつ、AIライティングツールの開発と運営を自ら行う。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。