如何设置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() 来计算字母数。

maxlength

最大字母的<div class="box"> <textarea name="" id="area" maxlength="100"></textarea> <div class="word-counter">0/100</div> </div> 属性。

keyup()

<强> Demo Fiddle

*注意：这支持空格。如果你只需要处理字母数，$('#area').keyup(function(){ $('.word-counter').text(this.value.replace(/ /g,'').length+'/100'); }) 可以被操纵。

{{1}}

<强> 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