jQuery的字符計數器問題

-2

發現這個非常簡單的代碼，顯示字符計數我的文字輸入：jQuery的字符計數器問題

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/

來源

2012-01-10 MB34

爲什麼不計數val（）。length每個模糊keyup（）事件？ – powtac 2012-01-10 17:25:05

有很多事情會有關腳本得到改善。你的問題的根源是由註釋中描述：

// eat backspaces, tabs, and CRs

其次，它使用事件，所以它可能有一定的其他問題。它還需要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.

來源

2012-01-10 17:22:20 Ryan

非常好。還處理剪貼板功能。 – MB34 2012-01-10 18:35:32

很好的答案和示例代碼是非常好的謝謝 - 添加'輸入'以及keyup和keydown修復了我的問題 – jpwynn 2012-08-31 02:47:22

這就是你所謂的「過編程」。參見：jsfiddle。

如果不是更好，它的工作原理也是一樣的（因爲它實際上可以識別退格）。

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

對於這樣簡單的事情，您所關心的只是在該字段中的keyups。當然，這會產生類似於Shift,CTRL,ALT等等，但是由於您所做的只是計算字段的長度和更新跨度，所以它並不重要。 KISS的完美案例。

來源

2012-01-10 17:27:09

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

來源

2012-01-10 17:42:32 powtac

jQuery的字符計數器問題

回答

相關問題