パーツ番号 04-11-01 ・ JavaScript使用

文字数カウンターが色変化するテキストエリア

入力中の文字数がリアルタイムに表示され、上限に近づくと警告色に変わるテキストエリア。WordPressのお問い合わせフォームで文字数制限のあるメッセージ欄に使うと、送信前に文字量を意識してもらえます。

clickjsinput

プレビュー

ソースコード

HTML

<div class="d04-11-01-wrap">
          <label class="d04-11-01-label" for="d04-11-01-ta">自己紹介文</label>
          <textarea class="d04-11-01-ta" id="d04-11-01-ta" maxlength="120" rows="3" placeholder="120文字以内で入力してください"></textarea>
          <p class="d04-11-01-count"><span class="d04-11-01-cur">0</span> / 120</p>
        </div>

CSS

.d04-11-01-wrap{width:min(280px,100%)}
        .d04-11-01-label{display:block;margin-bottom:6px;font-size:13px;color:#555;font-weight:700}
        .d04-11-01-ta{width:100%;padding:10px 12px;font-size:13px;font-family:inherit;border:2px solid #d5d9e0;border-radius:8px;resize:none;outline:none;transition:border-color .25s;background:#fff}
        .d04-11-01-ta:focus{border-color:#4a6cf7}
        .d04-11-01-count{margin:6px 0 0;text-align:right;font-size:12px;font-weight:700;color:#8a93a3;transition:color .25s}
        .d04-11-01-count.is-warn{color:#f5a623}
        .d04-11-01-count.is-full{color:#e5484d}

JavaScript

(function(){
        var ta=document.querySelector('.d04-11-01-ta');
        var cur=document.querySelector('.d04-11-01-cur');
        var count=document.querySelector('.d04-11-01-count');
        if(!ta||!cur||!count)return;
        var max=+ta.getAttribute('maxlength');
        ta.addEventListener('input',function(){
          var len=ta.value.length;
          cur.textContent=len;
          count.classList.remove('is-warn','is-full');
          if(len>=max)count.classList.add('is-full');
          else if(len>=max*0.8)count.classList.add('is-warn');
        });
      })();

クラス名 .d04-11-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。