jQueryの文字カウンタ私のテキスト入力の文字カウントを表示するには、この非常に簡単なコードを見つけ、問題

Question

：

私は以下のようにそれを修正

http://www.jamesfairhurst.co.uk/posts/view/jquery_word_character_counter

。ただし、バックスペースを使用すると正しく動作しません。 charカウントが正しく表示されません。誰かがこれを解決する手助けできますか？

$(document).ready(function() { 
    $('.word_count').each(function() { 
     $(this).parent().find('.counter').html('Only ' + $(this).attr("size") + ' characters allowed'); 
     // bind on key up event 
     $(this).keydown(function(event) {    
      k = event.keyCode; 
      // eat backspaces, tabs, and CRs 
      if(($(this).attr("size") - $(this).val().length) == 0&&(k!=8&&k!=9&&k!=13)) { 
       event.preventDefault(); 
      } else { 
       if($(this).val().length==0) { 
       $(this).parent().find('.counter').html('Only ' + $(this).attr("size") + ' characters allowed'); 
       } else { 
       $(this).parent().find('.counter').html(($(this).attr("size") - $(this).val().length-1) + ' characters left'); 
       } 
      } 
     }); 
    }); 
}); 

http://jsfiddle.net/Mrbaseball34/RymcJ/16/

Answer 1

そのスクリプトについて改善することができるものがたくさんあります。あなたの問題の原因は、コメントで説明されています。それは、特定の他の問題がある可能性がありますので

// eat backspaces, tabs, and CRs 

次に、それは、​​イベントを使用しています。より正確なmaxlength属性ではなく、size属性からのカウントも必要です。ここで私はそれを書き換えます方法は次のとおりです。

あなたは「オーバープログラム」と呼んでいるものだ

$(document).ready(function() { 
    $('.word_count').each(function() { 
     var $this = $(this); 
     var counter = $this.parent().find('.counter'); 
     var maxlength = $this.attr('maxlength'); 

     counter.text('Only ' + maxlength + ' characters allowed'); 

     $this.bind('input keyup keydown', function() { 
      var value = $this.val(); 

      if(value.length > 0) { 
       counter.text((maxlength - $this.val().length) + ' characters left'); 
      } else { 
       counter.text('Only ' + maxlength + ' characters allowed'); 
      } 
     }); 
    }); 
}); 

Here's a demo.

Answer 2

。参照：jsfiddle。

これは、実際にはバックスペースを認識するため、それほどうまくいかない場合でも機能します。この単純な何かのために

$(document).ready(function() { 
    $('.word_count').keyup(function() { 
     var $input = $(this); 
     $('.counter', $input.parent()).text($input.val().length); 
    }); 
}); 

、あなたが気にすべての分野でkeyupsです。もちろん、これはシフト、、CTRL、、ALTなどのようなものをキャッチしますが、フィールドの長さを数えてスパンを更新するだけなので、それは重要ではありません。 KISSの完璧なケース。

Answer 3

$(document).ready(function() { 
    var input = $('input.word_count'); 
    var counter = $('.counter'); 
    var size = input.attr('size'); 

    counter.text(size); 

    input.keyup(function() { 
     new_size = size - input.val().length; 

     if (!(new_size >= 0)) { 
      input.val(input.val().slice(0, -1)); 
     } else { 
      counter.text(new_size); 
     } 
    }) 
}); 

作業デモについては、http://jsfiddle.net/powtac/XHsz6/18/を参照してください。