JQuery счетчик символов проблема

Question

Найдено это очень простой код, чтобы показать подсчет символов для моих текстовых входов:

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

Я изменил его, как показано ниже. Однако при обратном перемещении он работает неправильно. он не отображает счетчик символов правильно. Может кто-нибудь помочь исправить это?

$(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 

Далее, он использует keydown события, так что, возможно, некоторые другие проблемы. Он также берет счет из атрибута size, а не более правильного атрибута maxlength. Вот как я бы переписать его:

$(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. Конечно, это улавливает такие вещи, как Shift, 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/ для рабочей демонстрации.