覚えていらっしゃいますか？
以下のブログの記事に私が書いた1文を。
JavaScriptの方がメインなので、そちらの解説をした方が良い気がしますが、それほど難しいことでもないので流し見していただけたらと。
「それほど難しいことでもないので」
・・・難しかったですorz
というより、すっかりjQueryの読み方・使い方を忘れていました。
あれだけやっていたのに3年も経つとここまで忘れるものなのかと少し驚きつつ、
リハビリを兼ねて少しコードを修正し、カウント数をUpdateできるように変更してみました。
修正後の動作イメージは以下になります。
解説あります！
今回カウント数の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のコードを見ていてコメントがないのには、コード以外に注意をそらさないためというのもあるのでしょうか？ いろいろ考えさせられます。
とはいえコメントがないのも不安なので、いいバランスを見つけていきたいところです。
