使用jquery或其他在textarea中倒计时可用空间？

Question

我在我的网站上有一些区域,我需要将文本输入限制为X个字符数量,并且在用户输入时显示剩余的空格很好,比如twitter.

我找到了这个jquery插件; jquery max-length插件

它只是我需要的东西,但它看起来有点像矫枉过正,我不确定文件大小,但它看起来像这么简单的任务的很多代码行,你认为我会更好地使用非jquery方法？我之所以考虑jquery,是因为jquery已经包含在我的所有页面 UPDATE中;

我刚刚发现这种非jquery方法完全相同的方法是占用更小的空间,所以这是更好的方法吗？

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
   if (limitField.value.length > limitNum) {
    limitField.value = limitField.value.substring(0, limitNum);
   } else {
    limitCount.value = limitNum - limitField.value.length;
   }
}
</script>

You have 
<input readonly type="text" name="countdown" size="3" value="1000">
characters left.

Answer 1

在jQuery中非常简单:

<textarea id="myTextarea"></textarea>
<p id="counter"></p>

<script type="text/javascript">
$('#myTextarea').keyup(function () {
    var left = 200 - $(this).val().length;
    if (left < 0) {
        left = 0;
    }
    $('#counter').text('Characters left: ' + left);
});
</script>

用你的限制代替200.

请注意,这并不限制实际的文本输入,它只是倒计时.您需要在服务器端检查输入长度,这只是一个可视帮助器.

顺便说一句,我认为你甚至不应该试图通过在达到限制时拒绝任何输入来限制输入长度.这是后方可用性方面的痛苦,无论如何都无法依赖.简单的倒计时和服务器端检查是最好的选择恕我直言.

Answer 2

有时您需要有多个文本区域并希望它们单独处理,而无需为每个区域编写代码.此代码动态地将剩余的字符添加到任何具有maxLength属性的字符...

<script type="text/javascript">
$(document).ready(function(){
    $('textarea[maxLength]').each(function(){
        var tId=$(this).attr("id");
        $(this).after('<br><span id="cnt'+tId+'"></span>');
        $(this).keyup(function () {
            var tId=$(this).attr("id");
            var tMax=$(this).attr("maxLength");//case-sensitive, unlike HTML input maxlength
            var left = tMax - $(this).val().length;
            if (left < 0) left = 0;
            $('#cnt'+tId).text('Characters left: ' + left);
        }).keyup();
    });
});
</script>
<textarea id="myTextarea" maxLength="200">Initial text lorem ipsum blah blah blah</textarea><br><br>
<textarea id="mySecondTextarea" maxLength="500"></textarea><br><br>
<textarea id="textareaWithoutCounter"></textarea>