jquery文本区长度计数?

时间:2010-12-22 07:13:29

标签: javascript jquery


我有一个文本区域字段,当用户在字段中输入一些文本时,我需要提供有关字数的信息。该字段的长度应为500个字符。 最初它必须显示

  

最小字符数:100 | 0 of 500 // 0 of 500必须为红色

一旦用户输入来,角色也需要更新计数。一旦用户达到计数,说明最小字符100,我需要显示

  

最小字符数:100 | 500 of 500 // 100 of 500必须是绿色。

我怎么能这样做?是否有相同的插件??? 让我知道你对此的看法。

5 个答案:

答案 0 :(得分:55)

最简单的计算方法:

var count = $("#your_textarea").val().length;

答案 1 :(得分:22)

$("#your-text-area").on('keyup', function(event) {
    var currentString = $("#your-text-area").val()
    $("Your Div").html(currentString.length);
    if (currentString.length <= 500 )  {  /*or whatever your number is*/
       //do some css with your div
    } else {
       //do some different stuff with your div
    }
});

http://api.jquery.com/bind/

答案 2 :(得分:7)

尝试使用此插件功能

jquery-character-counter from jqeasy.com

答案 3 :(得分:2)

我用

jQuery Textarea字符计数器插件

示例和文档:http://roy-jin.appspot.com/jsp/textareaCounter.jsp

答案 4 :(得分:2)

我在onkeydown活动中遇到了麻烦,并且在onkeyup上取得了成功。这是我想出的用于倒计数剩余字符的代码(限制为120)

$(function() {
  var input = $('#my-input'), display = $('.char-count'), count = 0, limit = 120;

  count = input.val().length
  remaining = limit - count
  update(remaining);

  input.keyup(function(e) {
    count = $(this).val().length;
    remaining = limit - count;

    update(remaining);
  });

  function update(count) {
    var txt = ( Math.abs(count) === 1 ) ? count + ' Character Remaining' :  count + ' Characters Remaining'
    display.html(txt);
  }

});