Comment bloquer d'autres entrées dans la zone de texte en utilisant maxlength

Question

J'ai une zone de texte sur laquelle je veux bloquer l'entrée si les caractères saisis atteignent une longueur maximale.

J'ai actuellement un script Jquery pour la zone de texte qui calcule les caractères entrés et que vous voulez ajouter quelque chose qui va bloquer l'entrée dans la zone de texte une fois que 150 caractères sont entrés.

J'ai essayé d'utiliser des plugins max-length en conjonction avec mon script, mais ils ne semblent pas fonctionner. L'aide est appréciée.

CODE COURANT

(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

Avez-vous essayé l'attribut maxlength? Cela bloquera l'entrée une fois la limite de caractères atteinte.

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

Modifier Il semble que maxlength pour un textarea travaille dans Chrome, mais pas dans d'autres navigateurs, mon mauvais. Eh bien, une autre approche serait juste de surveiller les événements de keydown et si la longueur> 150, retourner false/preventDefault/cependant vous voulez arrêter l'action par défaut. Vous souhaiterez toujours autoriser le retour arrière et entrer, par conséquent, surveillez également le code clé.

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

Vous pouvez tronquer le contenu du textarea si elle est de plus de 150 caractères comme décrit à http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/. Je peux voir quelques problèmes avec copier/coller si cela amène le texte à la limite cependant.

Answer 3

Textarea maxlength with Jquery fonctionne bien mais ne résout probablement pas le problème du collage dans de plus grandes quantités de texte.

PB Edit: a depuis été mis à jour here

Answer 4

Vous êtes beaucoup mieux de ne pas essayer d'empêcher l'utilisateur de taper trop de caractères et de montrer à la place un compteur et que l'application de la limite de caractères lorsque l'utilisateur tente de soumettre. Les boîtes de commentaires Stack Overflow sont un exemple décent. Il est à la fois techniquement plus facile et plus important pour l'utilisateur de le faire de cette façon: il est vraiment irritant de ne pas pouvoir taper/coller/glisser du texte dans une zone de texte même si vous savez qu'il y a une limite de caractères.

Answer 5

Essayez le code ci-dessous, je l'espère, rappellez-vous d'inclure la bibliothèque 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(); 
      } 
     }); 
    });  
});