如何使用maxlength阻止在textarea中的進一步輸入

Question

我有一個textarea，如果輸入的字符達到最大長度，我想阻止輸入。

我目前有一個用於計算輸入字符的文本框的Jquery腳本，並且希望添加一些將在輸入150個字符後阻止輸入到textarea中的輸入。

我已經嘗試使用最大長度的插件與我的腳本一起使用，但它們似乎不起作用。幫助表示讚賞。

當前代碼

(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在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

可以截斷textarea的內容，如果它是如在http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/描述超過150個字符。如果文本超過限制，我可以看到複製/粘貼的一些問題。

Answer 3

Textarea maxlength with Jquery工作正常，但可能不能解決粘貼大量文本的問題。

PB編輯：進行了更新here

Answer 4

你好得多沒有試圖阻止鍵入的字符太多，而是呈現出櫃檯，只有執行的字符數限制的用戶，當用戶試圖提交。評論框Stack Overflow是一個體面的例子。對用戶來說，這樣做在技術上更簡單，更重要的是以這種方式進行：即使您知道有字符限制，也不能將文本鍵入/粘貼/拖動到textarea中，這實在令人煩惱。

Answer 5

試試這個代碼下面我希望將工作，記得包括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(); 
      } 
     }); 
    });  
});