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

Posted 2023-05-07

【中文标题】如何设置textarea输入字母计数器[重复]

【英文标题】：How to set the textarea input letters counter [duplicate]

【发布时间】：2015-08-01 03:59:50

【问题描述】：

我曾与一个特定的宽度和高度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;

【问题讨论】：

类似的功能已经在这里讨论过：***.com/questions/30332301/…

【参考方案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)}

【讨论】：

你能帮我一个忙吗

我正在使用这个插件tympanus.net/codrops/2014/04/01/minimal-form-interface 所以当我嵌入 textarea 时它不起作用。我的意思是它没有验证并且它没有前进

我对插件一无所知。您可以在 *** 上发布新问题或查看插件文档

好的，谢谢@Shaunak D

让我们continue this discussion in chat。

【参考方案2】：

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

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

HTML

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

【讨论】：

这不能回答问题

Welp，没有意识到他想要 jQuery。我只是在谈论 HTML。

这不是关于 jQuery，他们要求的是字母计数器，而不是如何限制 textarea。

是的，我很抱歉。我只是在阅读问题并给出答案，显然，我必须放慢速度，并更彻底地阅读。

【参考方案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;

【参考方案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

【讨论】：

您可能需要检查按下的键是backspace 或delete 或arrow keys 等。否则这可能会导致问题！只是一个建议.. :)

按退格键时无法正常工作

【参考方案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