読者です 読者をやめる 読者になる 読者になる

White Box技術部

WEB開発のあれこれ(と何か)

(改訂)ちょっとカウントしたい文字数を変更したいときのHTML

覚えていらっしゃいますか?

以下のブログの記事に私が書いた1文を。

seri.hatenablog.com

JavaScriptの方がメインなので、そちらの解説をした方が良い気がしますが、それほど難しいことでもないので流し見していただけたらと。

「それほど難しいことでもないので」


・・・難しかったですorz

というより、すっかりjQueryの読み方・使い方を忘れていました。
あれだけやっていたのに3年も経つとここまで忘れるものなのかと少し驚きつつ、 リハビリを兼ねて少しコードを修正し、カウント数をUpdateできるように変更してみました。

github.com

修正後の動作イメージは以下になります。

f:id:seri_wb:20150519022301g:plain

解説あります!

今回カウント数のUpdateを実現するために、HTML側のJSとjQueryライブラリ側のJSに変更を加えています。

HTML側

ライブラリを改修し、同一要素に対してlimitCount複数回呼び出した場合は、 都度呼び出した際のパラメータでカウント上限数が更新されるようにしています。 なので、呼び出し元ではパラメータを変更して呼び出す契機を追加してあげればよくなります。

ということで、カウント数を入力できるフィールドと、更新契機となるボタンを追加し、 JavaScript側にはupdateCountというフィールドからカウント数を取得するメソッドを追加しています。

ボタンに対してのイベント登録も、画面初回ロード時に行うので、 後はボタンが押されるたびにupdateCountが動いて、 フィールド値をlimitCountに渡してくれます。

こっちは利用している側なので、処理は結構べたべたです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>文字数カウントしたいだけのページ</title>
   <script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript" src="../js/jquery.limitCount.js"></script>
   <script type="text/javascript">
       $(function() {
           updateCount();
           $("#update").click(function(){
               updateCount();
           });
       });

       var updateCount = function() {
           var count_num = $("#count_num").val();
           $("#count_target").limitCount(count_num);
       };
   </script>
   <style type="text/css">
    <!--
        textarea {
            width: 50em;
            height: 30em;
        }
    //-->
    </style>
</head>

<body>
    <input id="count_num" type="text" value="1000"/><button id="update">カウント数更新</button><br>
    <textarea id="count_target"></textarea>
</body>
</html>

ライブラリ側

以前のままだと、limitCountを複数回呼び出す度にspanタグが何度も追加されてしまうので、 spanタグの追加は『カウント対象のフィールドの横にspanタグがないときのみ行う』ようif文を追加しました。

あとはspanタグにバインドさせているfunctionでも、新しいカウント数が読み取れるよう、 カウント数をプラグイン中のグローバルスコープに定義しています。

細かいところだと、関数のパラメータから使われなくなったsizeを消していたりもします。

(function($){
    // プラグインの対象メソッド
    $.fn.limitCount = function(size, option) {
        $.lcf.size = size;
        return $.lcf.limitCount(this, option);
    };

    // 独自の名前空間
    $.lcf = {};

    $.lcf.size = -1;

    // 処理の実態
    //
    // target   : 入力フィールド自身 $(target)
    // option   : オプション(未実装のため利用していない)
    $.lcf.limitCount = function(target, option) {
        var $target = $(target);
        var firstcount = $.lcf.size - $target.val().length;
        var selectorval = "#" + $target.attr("id") + " + .count_input";

        if (($target.next("span.count_input")).size() === 0) {

            $target
                // カウント数を表示するタグを追加
                .after("<span class=\"count_input\"></span>")
                // 文字入力後のカウント
                .bind("keyup change", function(){
                    var countdown = $.lcf.size - $target.val().length;
                    var selectorval2 = "#" + this.id + " + .count_input";
                    $.lcf.limitCount.textcolor(selectorval2, countdown);
                });
        }
        // 初期カウント表示用
        $.lcf.limitCount.textcolor(selectorval, firstcount);
    };

    // 文字の装飾用
    $.lcf.limitCount.textcolor = function(selectorval, countdown) {
        var $count_input = $(selectorval);
        $count_input.html(countdown);

        if (countdown < 0) {
            $count_input.css({color:'#ff0000', fontWeight:'bold', padding:'3px'});
        } else {
            $count_input.css({color:'#0099ff', fontWeight:'normal', padding:'3px'});
        }
    };
})(jQuery);

コメントの罠

今回、ちょっとコードリーディング中に脳がフリーズしてしまった原因は、 実は過去に自分が書いていたコメントでした。 コードを読もうとしているのですが、どうしても意識がコメントの方に向いてしまい、 コードの内容がさっぱり入ってこなかったのです。

コメントは未来の自分に残す財産かと思ってましたが、こんな罠もあるんですね。 OSSのコードを見ていてコメントがないのには、コード以外に注意をそらさないためというのもあるのでしょうか? いろいろ考えさせられます。

とはいえコメントがないのも不安なので、いいバランスを見つけていきたいところです。