如何使用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中,这真的很烦人.