如何设置textarea输入字母计数器[重复]

Question

我曾与一个特定的宽度和高度textarea的让我怎么创建一个字母柜台，并设置在textarea的类型应该不超过100个字的最大字母。

HTML

<div class="box">
<textarea name="" id=""></textarea>
<div class="word-counter">0/100</div>
</div>

CSS

.box {
width:500px;
border: 1px solid red;
position:relative;
display:table;
}
textarea {
width:500px;
height:80px;
padding-bottom: 20px;
}
.word-counter {
position:absolute;
bottom: 0;
right:0;
}

Answer 1

使用 .keyup() 计算字母。

$('#area').keyup(function(){
    $('.word-counter').text($.trim(this.value.length)+'/100');
})

和maxlength 属性为最大字母。

<div class="box">
<textarea name="" id="area" maxlength="100"></textarea>
<div class="word-counter">0/100</div>
</div>

Demo Fiddle

*注意：这支持空格。如果您只需要处理字母计数，则可以操作 keyup()。

$('#area').keyup(function(){
    $('.word-counter').text(this.value.replace(/ /g,'').length+'/100');
})

Fiddle _{(Spaces ignored in letter count)}

Answer 2

您可以简单地使用maxlength，但这意味着您对其设置了字符限制而不是字数限制。如果您要求字数限制，则需要实现 JavaScript。

就我个人而言，我只是将我的字符限制设置为大约 1,000 或我希望评论/消息框扩大高度的数量。

HTML

<div class="box">
<textarea name="" id="" maxlength="50"></textarea>
<div class="word-counter">0/100</div>
</div>

Answer 3

你可以这样调用函数：

function countwords(str){
  var count = 0;
  str=str.trim();
  for (var i = 0; i <= str.length; i++) {
     if (str.charAt(i) == " ") {
        count ++;
      }
  }
  return count;
}

Answer 4

试试这个

$('#text').keydown(function(e){
    var code=e.keyCode;
    var length=$(this).val().split(' ').length;
    if(length<=100)
    {
        $('.word-counter').text(length+'/100');
    }
    else
    {
        if(code!=37&&code!=38&&code!=39&&40&&code!=8&&code!=46)
        {
        return false;
        }
    }
});

Working Demo

Answer 5

$('#text').keyup(function(e) {
    var length=parseInt($(this).val().length)+1;
     switch (e.keyCode) {
            case 8:  // Backspace
            length--;
             $('.word-counter').text(length+'/100');
             break;
            case 9:  // Tab
            case 13: // Enter
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down
            break;

            default:
                 if(length<=100)
                {
                    $('.word-counter').text(length+'/100');
                }
                else
                {
                    return false;
                }
        }         
    });

使用keyup() 进行字母计数
这是它的工作演示 Working Demo