如何使用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/所述 。 如果文本超出限制，我可以看到復制/粘貼的一些問題。