2012年6月7日木曜日

テキストエリアの入力文字数のリアルタイムカウント

twitterの文字数のカウンタを実装します。
まあ、調べると以下の感じです。
<textarea></textarea>
<p id="counter">140</p>

   $("textarea").bind("keyup",(function(){
        var counter = 140 - $(this).val().length;
        $("#counter").text(counter);
     }));

色つけたりは調べてください。

んで、これ微妙に反応悪い。
キーリピートに反応しない。

んで、イベントをkeydownにすると今度はコピペが取れない。
じゃあkeydownとkeyupの両方を取るとキーリピートの一発目が取れない。
わけわかんねーですが、いろいろ調べていたら
ちょっと遅れて値をとればいいらしい。
完成したコードは

    $("textarea").bind("keydown focus",(function(){
      var self = $(this);
      setTimeout(function() {
        var counter = 140 - $(self).val().length;
        $("#counter").text(counter);
      }, 10);
    }));

でたーセルフハック。
なんかあとで処理するようなコールバックの処理ではthisが不明になります。
まあ、実際に呼ばれるときはこの関数抜けてるからね。
で、selfにthisを保存しておくと言う奴で切り抜ける。
selfはなぜ生きているのかといえばこれがクロージャーなんでしょうね。
thisは意味が特殊なのでシチュエイションでちゃんと意味が変わらないといけないでしょうね。
focusイベントも念のため入れて、これで本家twitterのカウンターにだいぶ近いんじゃないでしょうかね。

0 件のコメント:

コメントを投稿