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

Question

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

Answer 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。

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

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