Come posso bloccare ulteriore input in textarea usando maxlength

Question

Ho un'area di testo su cui voglio bloccare l'input se i caratteri immessi raggiungono una lunghezza massima.

Attualmente ho uno script Jquery per la casella di testo che calcola i caratteri immessi e voglio aggiungere qualcosa che bloccherà l'input nell'area di testo una volta inseriti 150 caratteri.

Ho provato a utilizzare i plug-in di lunghezza massima insieme al mio script ma non sembrano funzionare. L'aiuto è apprezzato

codice corrente

(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

Hai provato l'attributo maxlength? Questo bloccherà l'input una volta raggiunto il limite di caratteri.

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

Modifica Sembra che maxlength per una textarea funziona in Chrome, ma non in altri browser, il mio male. Bene, un altro approccio sarebbe solo quello di monitorare gli eventi di keydown e se lunghezza> 150, restituisce false/preventDefault/comunque si desidera interrompere l'azione predefinita. Dovresti comunque consentire il backspace e inserire comunque, quindi controlla anche il keycode.

$('#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

è possibile troncare il contenuto del textarea se si tratta di più di 150 caratteri, come descritto in http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/. Posso vedere alcuni problemi con copia/incolla se questo porta il testo oltre il limite.

Answer 3

Textarea maxlength with Jquery funziona correttamente ma probabilmente non risolve il problema di incollare grandi quantità di testo.

PB Edit: dal momento che è stato aggiornato here

Answer 4

Tu sei molto meglio non cercare di impedire all'utente di digitare in troppi personaggi e invece mostrare un contatore e solo far rispettare il limite di caratteri quando l'utente tenta di Sottoscrivi. Le caselle di commento Stack Overflow sono un esempio decente. È tanto più semplice tecnicamente che, cosa più importante, è meglio per l'utente farlo in questo modo: è davvero irritante non poter digitare/incollare/trascinare il testo in una textarea anche se si sa che c'è un limite di caratteri.

Answer 5

provare questo codice di seguito spero funzionerà, ricordarsi di includere libreria 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(); 
      } 
     }); 
    });  
});