如何使用maxlength阻止textarea中的进一步输入

Question

我有一个textarea，如果输入的字符达到最大长度，我想阻止输入。

我目前有一个文本框的Jquery脚本，用于计算输入的字符，并希望添加一些内容，一旦输入150个字符，将阻止textarea中的输入。

我已经尝试将max-length插件与我的脚本结合使用，但它们似乎不起作用。 感谢帮助。

当前代码

(function($) {
    $.fn.charCount = function(options){
        // default configuration properties
        var defaults = {    
            allowed: 150,       
            warning: 25,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: '',
            container: undefined // New option, accepts a selector string
        }; 

        var options = $.extend(defaults, options); 

        function calculate(obj,$cont) {
              // $cont is the container, now passed in instead.
            var count = $(obj).val().length;
            var available = options.allowed - count;
            if(available <= options.warning && available >= 0){
                $cont.addClass(options.cssWarning);
            } else {
                $cont.removeClass(options.cssWarning);
            }
            if(available < 0){
                $cont.addClass(options.cssExceeded);
            } else {
                $cont.removeClass(options.cssExceeded);
            }
            $cont.html(options.counterText + available);
        };

        this.each(function() {
         // $container is the passed selector, or create the default container
            var $container = (options.container)
                    ? $(options.container)
                        .text(options.counterText)
                        .addClass(options.css)
                    : $('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>').insertAfter(this);
            calculate(this,$container);
            $(this).keyup(function(){calculate(this,$container)});
            $(this).change(function(){calculate(this,$container)});
        });

    };
})(jQuery);

Answer 1

你试过maxlength属性吗？ 一旦达到字符限制，这将阻止输入。

<textarea maxlength='150'></textarea>​​​​​​​​​​​​​​​​​​​​​​​​​​ // Won't work
<input type='text' maxlength='150' />

编辑看起来textarea的maxlength在Chrome中有效，但在其他浏览器中却没有，我的不好。 好吧，另一种方法只是监视keydown事件，如果长度> 150，则返回false / preventDefault /但是你想要停止默认操作。 您仍然希望允许退格并输入，因此也要监视密钥代码。

$('#yourTextarea').keydown(function(e) {
    if (this.value.length > 150) 
        if ( !(e.which == '46' || e.which == '8' || e.which == '13') ) // backspace/enter/del
            e.preventDefault();
});

Answer 2

你最好不要试图阻止用户键入太多字符，而是显示一个计数器，只在用户尝试提交时强制执行字符限制。 评论框Stack Overflow就是一个不错的例子。 对于用户而言，这样做更容易，更重要的是这样做：即使你知道有字符限制，也不能将文本输入/粘贴/拖动到textarea中，这真的很烦人。

Answer 3

使用Jquery的Textarea maxlength工作正常，但可能无法解决大量文本粘贴的问题。

PB编辑：已被更新， 在这里

Answer 4

尝试下面的代码我希望能工作，记得包含jQuery库

<div class="texCount"></div>
<textarea class="comment"></textarea>

$(document).ready(function(){
    var text_Max = 200;      
    $('.texCount').html(text_Max+'Words');

    $('.comment').keyup(function(){        
        var text_Length = $('.comment').val().length;        
        var text_Remain = text_Max - text_Length;       
        $('.texCount').html(text_Remain + 'Words');

        $('.comment').keydown(function(e){         
            if(text_Remain == 0){
                e.preventDefault();
            }
        });
    });    
});

Answer 5

如果它超过150个字符，您可以截断textarea的内容，如http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/所述 。 如果文本超出限制，我可以看到复制/粘贴的一些问题。