显示 textarea 值的长度超出最大值

Posted 2023-05-07

【中文标题】显示 textarea 值的长度超出最大值

【英文标题】：display length of textarea value out of max

【发布时间】：2013-07-17 05:32:27

【问题描述】：

我想要一个文本区域，显示我在其中写了多少，并将其显示在文本区域的右下角（在文本框内）超出值的最大长度。 找不到怎么做。 谢谢。

【问题讨论】：

你至少可以尝试一下，无论这里有什么可能的答案：***.com/questions/5371089/…

你已经尝试了什么？

你有没有费心用谷歌搜索它？ bit.ly/194xTGb

我猜应该没那么紧急，然后……

【参考方案1】：

您可以通过以下简单代码使用 jQuery 实现此目的：

var theCounter = $('#textareaLength'),
    textarea = $('#myTextarea'),
    maxLength = textarea.attr('length');

theCounter.text('0 / '+maxLength);
theCounter.css(  
    'top': (textarea.offset().top + textarea.height()) - theCounter.height(),
    'left': (textarea.offset().left + textarea.width()) - theCounter.width()
);

textarea.on('keydown', function()   
    var theLength = $(this).val().length;
    theCounter.text($(this).val().length+' / '+maxLength)
              .css(  
                  'left': (textarea.offset().left + textarea.width()) - theCounter.width()
              );
);

显然，如果达到最大长度，您需要添加一些逻辑来防止发生任何进一步的操作，但这应该是不言自明的。

我已经为你整理了一个jsFiddle。

【参考方案2】：

这是一个你可以使用的函数

javascript：

function CountWords(s) 
   var maxChars = 2048;
   if (s.value.length > maxChars) 
       s.value = s.value.substring(0, maxChars);
   
   else 
       $($(s).parent()).find("#words").html((maxChars - s.value.length) + " characters     left.");
   

HTML：

<textarea onkeyup="CountWords(this)" id="txtBody" rows="50" cols="10"
            ></textarea>
        <span id="words" style="width: 120px; color:Gray; display: block; float: left; margin: 5px; line-height: 27px;">
            2048 characters left.</span>

您可以将数字更改为您想要的字母限制。

【讨论】：

您在回答中使用了原生 JavaScript 和 jQuery 的组合——这可能值得一提。另外，现在是 2013 年；请不要推荐侵入式事件处理程序。