Question

我想在jquery中限制textarea中的字符。这是我的jquery代码

$('#editnote-tooltip-wrapper').appendTo($(this).closest('.editnote-tip-wrapper')).fadeIn(300).css({ 'position': 'absolute', 'left': 0, 'top': 0, 'z-index': '10000' }).find('.content').html('<textarea cols="5" rows="5" class="elastic" style="overflow: hidden; height: 150px;"></textarea>' + $html);

我怎样才能使这成为可能。有人帮忙吗？

Answer 1

您可以参考此link，其中包含详细信息和示例。你可以试试this。代码是

    $(document).ready( function() {        
        var maxLen = 10;

        $('#send-txt').keypress(function(event){
            var Length = $("#send-txt").val().length;
            var AmountLeft = maxLen - Length;
            $('#txt-length-left').html(AmountLeft);
            if(Length >= maxLen){
                if (event.which != 8) {
                    return false;
                }
            }
        });

});

Answer 2

限制角色你可以使用html的 maxlength 属性。比如<textarea cols="5" rows="5" class="elastic" style="overflow: hidden; height: 150px;" maxlength="500"></textarea>

无论如何它不会在ie9中起作用，但你可以按照下面的代码。

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font>
</form>

有关详细信息，请参阅this page!!.。

Answer 3

jQuery Limit是一个轻量级插件（~6 Kb），它限制了可以在textarea或输入字段中输入的字符数。该插件还可以报告用户到达之前剩余的字符数。长度限制。“

只需要两个元素：textarea或输入字段，以及另一个元素（在下面的示例中为span），以显示可用的字符数。它超级简单易用。

You have <span id="charsLeft"></span> chars left.
<textarea id="myTextarea"></textarea>
<script type="text/javascript">
  $('#myTextarea').limit('140','#charsLeft');
</script>

demo | on Github

Answer 4

这对我来说完全有效。

<textarea name="txtScript" id="word_count" cols="30" rows="10"></textarea>
<br>
Total word Count : <span id="display_count">0</span> words. Words left : <span id="word_left">10</span>

$(document).ready(function() {
    $("#word_count").on('keydown', function(e) {
        var words = $(this).val().length;
        if (words <= 10) {
            $('#display_count').text(words);
            $('#word_left').text(10-words)
        }else{
            if (e.which !== 8) e.preventDefault();
        }
    });
 });

Answer 5

你可以使用textarea的属性

例如，这个将字符限制为10

.html('<textarea maxlength="10" cols="5" rows="5" class="elastic" style="overflow: hidden; height: 150px;"></textarea>' + $html);

Answer 6

请记住，用户也可以输入文字。使用keypress是错误的，您将必须像这样使用keyup事件：

    $('#my-textarea').keyup(function(event){
        var $field = $('#my-textarea');
        var $left = $('#my-textarea-length-left');
        var len = $field.val().length;
        if (len >= 300) {
            $field.val( $field.val().substring(0, 299) );
            $left.text(0);
            if (event.which != 8) {
                return false;
            }
        }
        $left.text(300 - len);
    });

这会将id为“ my-textarea”的textarea限制为300个字符，并显示id为“ my-textarea-length-left”的span或div中剩余的数量。

它可以正确处理文本粘贴。

HTML标记：

<textarea rows="4" id="my-textarea"></textarea>
<span id="my-textarea-length-left"></span>

在jquery中限制textarea中的字符

6 个答案: