¿Cómo puedo bloquear entradas adicionales en textarea utilizando maxlength?

Question

Tengo un área de texto en el que quiero bloquear la entrada si los caracteres ingresados ​​alcanzan una longitud máxima.

Actualmente tengo un script de Jquery para el cuadro de texto que calcula los caracteres ingresados ​​y desea agregar algo que bloqueará la entrada en el área de texto una vez que se ingresen 150 caracteres.

He intentado utilizar complementos de longitud máxima junto con mi script, pero parece que no funcionan. La ayuda es apreciada.

CÓDIGO ACTUAL

(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

¿Has probado el atributo maxlength? Eso bloqueará la entrada una vez que se alcance el límite de caracteres.

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

Editar Parece que maxlength de un área de texto funciona en Chrome, pero no en otros navegadores, mi mal. Bueno, otro enfoque sería supervisar los eventos de keydown y si length> 150, devuelve false/preventDefault/como quiera que se detenga la acción predeterminada. Sin embargo, aún desea permitir el retroceso e ingresar, así que también controle el código clave.

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

Puede limitar el contenido del área de texto si se trata de más de 150 caracteres, como se describe en http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/. Puedo ver algunos problemas con copiar/pegar si eso trae el texto por encima del límite sin embargo.

Answer 3

Textarea maxlength with Jquery funciona bien, pero probablemente no resuelva el problema de pegar en grandes cantidades de texto.

PB edición: ya se ha actualizado here

Answer 4

Es mucho mejor no tratar de evitar que el usuario escriba en demasiados personajes y en su lugar muestra un contador y sólo hacer cumplir el límite de caracteres cuando el usuario intenta enviar. Los cuadros de comentarios Stack Overflow son un buen ejemplo. Para el usuario, es más fácil desde el punto de vista técnico y más importante aún mejor hacerlo de esta manera: es realmente irritante no poder escribir/pegar/arrastrar texto en un área de texto incluso si sabes que hay un límite de caracteres.

Answer 5

probar este código de abajo espero que funcione, no olvide incluir la librería 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(); 
      } 
     }); 
    });  
});