24

我的网站上有几个区域需要将文本输入限制为 X 个字符，并且在用户输入时显示一些剩余的空格很好，就像 twitter 一样。

我找到了这个 jquery 插件； jquery 最大长度插件

它只是我需要的，但似乎有点矫枉过正，我不确定文件大小，但对于这样一个简单的任务，它看起来像很多行代码，你认为我最好使用非 jquery 方法吗? 我认为 jquery 是要走的路的原因是因为 jquery 已经包含在我所有的页面 更新中；

我刚刚发现这种非 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.
4

9 回答 9

54

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

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

顺便说一句，我认为您甚至不应该尝试通过在达到限制时拒绝任何输入来限制输入长度。就后部可用性而言，这是一种痛苦，无论如何都不能依赖。一个简单的倒计时和服务器端检查是最好的选择恕我直言。

于 2009-08-09T06:09:43.993 回答
7

有时您需要拥有多个文本区域并希望它们单独处理，而不必为每个区域编写代码。此代码将剩余的字符动态添加到任何具有 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>
于 2011-12-13T21:59:43.300 回答
3

我成功使用了 Aaron Russell 的简单可数 jQuery 插件

简单用法：

$('#my_textarea').simplyCountable();

高级用法：

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});
于 2010-01-26T00:11:58.430 回答
2 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function()
        {
            $('#TestId').keyup(function(e)
            {
                var maxLength = 100;
                var textlength = this.value.length;
                if (textlength >= maxLength)
                {
                    $('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
                    this.value = this.value.substring(0, maxLength);
                    e.preventDefault();
                }
                else
                {
                    $('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
                }
            });
        });
    </script>
</head>
<body>
    <textarea id="TestId" cols="20" rows="8"></textarea><br />
    (Maximum characters: 100)<br />
    <span id="charStatus"></span>   
</body>
</html>
于 2009-08-09T10:17:18.970 回答
2 
 var max = 140;
        $("#spn").html(max+"  Remaining");
        $("#textarea").keyup(function () {
            var lenght1 = $("#textarea").val().length;
            var remaining = max - lenght1;
            $("#spn").html(remaining + "  Remaining");
            if (remaining < 0) { $("#spn").css('opacity', '0.4').css('color', 'red'); $("#comment").attr('disabled', 'disabled'); } else { $("#spn").css('opacity', '1').css('color', 'black'); $("#comment").removeAttr('disabled'); }
            if (remaining < 10) { $("#spn").css('color', 'red'); } else { $("#spn").css('color', 'black'); }

        });
于 2015-03-29T14:28:28.450 回答
1

我使用了 jQuery 和 deceze 的答案，然后对其进行了调整，给了我一个 twitter 风格的倒计时，这样用户就可以看到他们已经完成了多少，并相应地调整他们的文本。我还把它放到了它自己的函数中，这样我就可以从另一个有时会自动填充文本区域的函数中调用它：

    function reCalcToText() {
        var left = 200 - $('.toText').val().length;
        if (left < 0) {
            $('#counter').text(left);
            $('#counter').addClass("excess");
        } else {
            $('#counter').text(left);
            $('#counter').removeClass();
        }
    }
    function onReady() {
                  $('#<%= toText.ClientID %>').keyup(function() {
            reCalcToText();
        });
    };
于 2009-09-30T03:45:23.530 回答
1

所以我采用了@deceze 版本并添加了一些技巧来实现它：

  • 始终显示，不仅在用户开始输入时显示，
  • 超过限制时显示减号，并且

  • 添加类 - 为文本着色 - 当它超过限制时（当然需要额外的 css）

    $(document).ready(function(){
    var left = 200
    $('#field_counter').text('Characters left: ' + left);

        $('#id_description').keyup(function () {

        left = 200 - $(this).val().length;

        if(left < 0){
            $('#field_counter').addClass("overlimit");
        }
        if(left >= 0){
            $('#field_counter span').removeClass("overlimit");
        }

        $('#field_counter').text('Characters left: ' + left);
    });
});

对于任何需要和我一样的人:)

于 2012-03-06T15:46:24.563 回答
0

使用 jQuery，假设您有一个带有 id字段的 textarea ，您希望限制为 100 个字符，以及另一个带有 id chars-remaining的元素来显示可用字符的数量：

var max = 100;
$('#field').keyup(function() {
    if($(this).val().length > max) {
        $(this).val($(this).val().substr(0, max));
    }
    $('#chars-remaining').html((max - $(this).val().length) + ' characters remaining');
});
于 2009-08-09T06:09:33.310 回答
0

请记住，您必须考虑 NewLines 是 2 个字符。
我建立在此处提供的解决方案的基础上，下面的代码占了新的行。

function DisplayCharactersLeft(idOfInputControl) {
    var maxNumberOfCharacters = $("#" + idOfInputControl).attr("maxLength");

    $("#" + idOfInputControl).on("input", function () {
        var currentText = $(this).val();
        var numberOfNewLines = GetNumberOfNewLines(currentText);

        var left = maxNumberOfCharacters - (currentText.length + numberOfNewLines);
        if (left < 0) { left = 0; }
        $("#" + idOfInputControl + "CharactersLeftCounter").text("Characters left: " + left);
    });

}    

function GetNumberOfNewLines(text) {

    var newLines = text.match(/(\r\n|\n|\r)/g);
    var numberOfNewLines = 0;
    if (newLines != null) {
        numberOfNewLines = newLines.length;
    }
    return numberOfNewLines;
}
于 2015-10-12T20:05:19.447 回答