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)); }); });