Inputタグの残り文字数を表示する

要件

• テキストのmaxlengthに対して入力可能な残り文字数を表示する。
• フォーカスのある時だけ表示される。
• どのInputタグでも同じルールで書いておけば文字数が適用される。

HTML

• p.counter = カウンター全体
• span.count = 文字数出力

<div class="form-group">
    <p class="counter pull-right text-muted" style="display: none">あと<span class="count"></span>文字まで</p>
    <input class="form-control" name="title" id="title"
       rows="3" placeholder="タイトルを入力して下さい。" maxlength="50"/>
</div>
<div class="form-group">
    <p class="counter pull-right text-muted" style="display: none">あと<span class="count"></span>文字まで</p>
    <textarea class="form-control" name="comment" id="comment"
       rows="3" placeholder="コメントを入力して下さい。" maxlength="200"></textarea>
</div>

JavaScript

残り文字数の表示

• input[type=text]タグとtextareaを探す
• changeイベント,keyupイベントを取得する
• 親要素以下のグループにカウンターがあるかを探す
• あればmaxlengthを取得し、残りを得る。
• span.counterに残数をセット

//変更があったら残り文字数を表示
$(document).on("change keyup", ".form-group input[type='text'],.form-group textarea", function () {
    var count, $parent, maxLength, $target;

    $parent = $(this).parent();
    $target = $("p.counter", $parent);
    if ($target.length == 1) {
        count = $(this).val().length;
        maxLength = $(this).attr('maxlength');
        if (isFinite(maxLength)) {
            $("span.count", $target).text(parseInt(maxLength) - count);
        }
        console.log(count);
    }
});

//フォーカスが当たったら表示
$(document).on("focus", ".form-group input[type='text'],.form-group textarea", function () {
    var count, $parent, maxLength, $target;
    $parent = $(this).parent();
    $target = $("p.counter", $parent);
    if ($target.length == 1) {
        count = $(this).val().length;
        maxLength = $(this).attr('maxlength');
        if (isFinite(maxLength)) {
            $("span.count", $target).text(parseInt(maxLength) - count);
        }
    }
    $target.show();
});

//フォーカスが外れたら隠す
$(document).on("blur", ".form-group input[type='text'],.form-group textarea", function () {
    var $parent, $target;
    $parent = $(this).parent();
    $target = $("p.counter", $parent);
    $target.hide();
});

リファクタリングの余地を残しつつ終了。Inputタグが増えてもJavaScript側の記述は増えないようにはなった。
残り文字数のブロック要素はあらかじめHTML側に書いておかずにJavaScript側で挿入でもよいかもしれない。その場合の方がinputタグ側のclass名か独自data属性の指定で機能を付与できてコード量が減りそう。