Question

我希望有一个文本区域，显示我在其中写了多少，并在值的最大长度中将其显示在textarea（文本框内）的右下角。无法找到如何做到这一点。感谢。

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>

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

显示textarea值的最大值

2 个答案: