jQueryで複数のフォームに文字数カウンターを表示する

文字数カウンターを複数フォームに表示するためのjQueryです。

コード

HTMLは以下のようにします。

.input-field以下に文字数を表示する.input-field__countをつくり、データ属性(data-count)に最大文字数を設定します。

<div class="input-field">
  <input type="text">
  <div class="input-field__count" data-count="45"></div>
</div>

jQueryは以下のようにします。 すべてのtextarea, input[type=text]に文字数カウンターを表示します。

$(function(){
  function countInputText(input) {
    //文字数を表示する.input-field__countを取得
    var counter = $(input).parents('.input-field').find(".input-field__count");

    // データ属性(data-count)から最大文字数を取得
    var maxLength = counter.data("count");

    // 現在の文字数を取得
    var currentLength = $(input).val().length;
    var htmlVal = currentLength + " / " + maxLength;

   // 現在の文字数と最大文字数を比較して、
   // 現在の文字数が多ければ赤く表示する
    if ( parseInt(currentLength) >= parseInt(maxLength) ) {
      counter.html("<span style='color:red'>" + htmlVal + "</span>");
    } else {
      counter.html(htmlVal);
    }
  }

  // ページ表示時に文字数をカウントして表示
  $('textarea, input[type=text]').each(function(){
    countInputText($(this));
  });

  // フォーム入力時に文字数をカウントして表示
  $('textarea, input[type=text]').on('keydown keyup keypress change',function(){
    countInputText($(this));
  });
});