【HTML】文字数に制限のある項目に、あと何文字入力可能かリアルタイムで表示する【jQuery】

【HTML】文字数に制限のある項目に、あと何文字入力可能かリアルタイムで表示する【jQuery】

こんにちは。
今日は、「入力文字数に制限がある項目に、入力しながらあと何文字入力可能か表示してほしい。」
という要望があった場合の対処です。
地味に要望多いんで、自作のライブラリに入れています。
せっかくなんで共有しようと思います。

実際のソースと使い方

まずはソースを見ていきましょう。

$(function(){
    //残り文字数を表す要素を無ければ追加する
    function add_count_disp(targetElement){
        if(!targetElement.prev().hasClass("count-disp")){
            targetElement.before('<p class="count-disp"></p>');
        }
    }

    //指定した要素の残り入力可能文字数を表示する
    function count_length(targetElement){
        var inputlength = targetElement.val().length;
        var maxlength = targetElement.attr("maxlength");

        if(!maxlength) return;

        var count = (maxlength - inputlength);
        var count_message = '残り' + count + '文字';

        if(targetElement.prev().hasClass("count-disp")){
            targetElement.prev().html(count_message);
        }
    }

    //クラス:count-lengthの要素に入力があるたびに呼び出す
    $(".count-length").keyup(function(){
        add_count_disp($(this));
        count_length($(this));
    })

    //ページ読み込み時、クラス:count-lengthのすべての要素の入力文字数をカウント
    $(".count-length").each(function(){
        add_count_disp($(this));
        count_length($(this));
    })
});

使い方としては、
入力文字数をカウントしたい要素に「count-length」というクラスをつける。
「maxlength」を指定する。
これだけです。

データの変更画面のような、最初から文字がセットされている場合も
正しく文字数がカウントされるように考慮しています。

上記のソースをそのまま使えば、
count-lengthというクラスが付与された要素の前に「残り〇文字」と表示されます。

実際にこちら
ソースを書き換えながら試してみてください。

注意すべき点は、残り文字数を表示する要素を自動的に追加する部分です。
この部分が原因で見た目が崩れたりしないように適宜変えて使ってください。
(単純にp要素を追加するだけなので問題は起きにくいとは思いますが。)

まとめ

やっていることに対してちょっとソースが長い感じもしますが、
汎用性を高めるのと、修正・変更をしやすくなるように考慮しているので、
まぁ良いかなと自分では思っています。

自分でよく施すような処理を汎用的な組み方で
ライブラリ化しておくと、結構便利ですよ。
「なんか似たようなこと、やったことあるなぁ」と思ったらライブラリ化を検討すべきだと思います。

これが誰かの役に立てば幸いです。
では。