2

我想在 jquery 中限制 textare 中的字符。这是我的 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);

我怎样才能做到这一点。有人帮忙吗？

4

6 回答 6

3

要限制字符，您可以只使用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>

参考这个页面！！。了解更多信息。

于 2013-05-06T09:55:42.427 回答
2

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

只需要两个元素：一个文本区域或输入字段，以及另一个元素（在下面的示例中，一个跨度）来显示有多少字符可用。它超级简单易用。

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

演示| 在 Github 上

于 2014-06-23T20:14:12.047 回答
1

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

    $(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;
                }
            }
        });

});
于 2013-05-06T09:35:48.377 回答
1

这完全适合我。

<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();
        }
    });
 });
于 2016-09-03T15:32:46.260 回答
0

您可以对 textarea 使用 maxlength 属性

例如这个将字符限制为 10

.html('<textarea maxlength="10" cols="5" rows="5" class="elastic" style="overflow: hidden; height: 150px;"></textarea>' + $html);
于 2013-05-06T09:33:57.933 回答
0

请记住，用户也可以过去文本。使用 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 个字符，并显示一个 span 或 div 中剩余的数量，id 为“my-textarea-length-left”。

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

HTML 标记：

<textarea rows="4" id="my-textarea"></textarea>
<span id="my-textarea-length-left"></span>
于 2019-09-18T18:41:32.663 回答