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就是一个不错的例子。这在技术上更容易，更重要的是用户更好地这样做：即使您知道字符限制，也不能将文本输入/粘贴/拖动到文本区域，这真的很烦人。

Answer 3

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

PB编辑：此后已更新here

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

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

5 个答案: