web-dev-qa-db-fra.com

textarea limite de caractères

J'aimerais pouvoir limiter le nombre de caractères dans une zone de texte. La méthode que j'utilise fonctionne très bien dans Google Chrome, mais est lente dans Firefox et ne fonctionne pas dans IE.

Javascript:

function len(){
  t_v=textarea.value;
  if(t_v.length>180){
    long_post_container.innerHTML=long_post;
    post_button.className=post_button.className.replace('post_it_regular','post_it_disabled');
    post_button.disabled=true;
  }
  else{
    long_post_container.innerHTML="";
    post_button.className=post_button.className.replace('post_it_disabled','post_it_regular');
    post_button.disabled=false;
  }
  if(t_v.length>186){
        t_v=t_v.substring(0,186);
    }
}

HTML:

<textarea id="user_post_textarea" name="user_post_textarea" cols="28" rows="1"  onkeypress="len();" onkeyup="len();"></textarea>

Javascript au bas de l'élément body:

textarea=document.getElementById('user_post_textarea');
javascripthtmltextareacross-browser
26
Web_Designer

J'ai trouvé une bonne solution qui utilise l'attribut maxlength si le navigateur le prend en charge et revient à un pollyfill javascript discret dans les navigateurs non pris en charge.

Merci à commentaire de @Dan Tello Je l'ai corrigé pour qu'il fonctionne également dans IE7 +:

HTML:

<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>

Javascript:

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}

maxLength(document.getElementById("text"));

D&EACUTE;MO

Il y a rien de tel comme attribut minlength en HTML5.
Pour les types d'entrée suivants: number, range, date, datetime, datetime-local, month, time et week (lesquels ne sont pas encore pris en charge ) utilisent les attributs min et max.

68
Web_Designer

Ceci n’a pas été testé, mais il devrait faire ce dont vous avez besoin.

Mise à jour: voici un jsfiddle à regarder. Semble travailler. lien

Vous le feriez passer dans un fichier js et le référencer après votre référence jquery . Vous l'appelleriez alors comme ceci ..

$("textarea").characterCounter(200);

Une brève explication de ce qui se passe ..

Lors de chaque événement keyup, la fonction vérifie le type de touche sur lequel vous appuyez. Si cela est acceptable, le compteur vérifiera le compte, coupera tout excès et empêchera toute autre entrée une fois la limite atteinte.

Le plugin doit également gérer le collage dans la cible.

  ; (function ($) {
        $.fn.characterCounter = function (limit) {
            return this.filter("textarea, input:text").each(function () {
                var $this = $(this),
                  checkCharacters = function (event) {

                      if ($this.val().length > limit) {

                          // Trim the string as paste would allow you to make it 
                          // more than the limit.
                          $this.val($this.val().substring(0, limit))
                          // Cancel the original event
                          event.preventDefault();
                          event.stopPropagation();

                      }
                  };

                $this.keyup(function (event) {

                    // Keys "enumeration"
                    var keys = {
                        BACKSPACE: 8,
                        TAB: 9,
                        LEFT: 37,
                        UP: 38,
                        RIGHT: 39,
                        DOWN: 40
                    };

                    // which normalizes keycode and charcode.
                    switch (event.which) {

                        case keys.UP:
                        case keys.DOWN:
                        case keys.LEFT:
                        case keys.RIGHT:
                        case keys.TAB:
                            break;
                        default:
                            checkCharacters(event);
                            break;
                    }   

                });

                // Handle cut/paste.
                $this.bind("paste cut", function (event) {
                    // Delay so that paste value is captured.
                    setTimeout(function () { checkCharacters(event); event = null; }, 150);
                });
            });
        };
    } (jQuery));
8
James South

utiliser l'attribut maxlength de textarea ferait l'affaire… simple code html… non JS ou JQuery ou vérification côté serveur requise .... 

1
Rohit Gupta

Je pense que cela pourrait être plus facile que la plupart des gens le pensent!

Essaye ça:

var yourTextArea = document.getElementById("usertext").value;
// In case you want to limit the number of characters in no less than, say, 10
// or no more than 400.        
    if (yourTextArea.length < 10 || yourTextArea.length > 400) {
        alert("The field must have no less than 10 and no more than 400 characters.");
        return false;
    }

S'il vous plaît laissez-moi savoir que cela était utile. Et si oui, votez! THX!

Daniel

1
Daniel Montenegro

Cela fonctionne sur keyup et coller, il colore le texte en rouge lorsque vous avez presque atteint la limite, le tronque lorsque vous passez au-dessus et vous avertit de modifier votre texte, ce que vous pouvez faire.

var t2 =/* référence textarea * /

t2.onkeyup= t2.onpaste= function(e){
    e= e || window.event;
    var who= e.target || e.srcElement;
    if(who){
        var val= who.value, L= val.length;
        if(L> 175){
            who.style.color= 'red';
        }
        else who.style.color= ''
        if(L> 180){
            who.value= who.value.substring(0, 175);
            alert('Your message is too long, please shorten it to 180 characters or less');
            who.style.color= '';
        }
    }
}
1
kennebec

Je crois que si vous utilisez des délégués, cela fonctionnerait ..

$("textarea").on('change paste keyup', function () {
    var currText = $(this).val();
    if (currText.length > 500) {
        var text = $(this).text();
        $(this).text(text.substr(0, 500));
        alert("You have reached the maximum length for this field");
    }
});
0
El Colo

Essayez d’utiliser jQuery pour éviter les problèmes de compatibilité entre navigateurs ...

$("textarea").keyup(function(){
    if($(this).text().length > 500){
        var text = $(this).text();
        $(this).text(text.substr(0, 500));   
    }
});
0
Dejan Marjanovic

Version jQuery universelle rapide et sale. Prend en charge copier/coller.

$('textarea[maxlength]').on('keypress mouseup', function(){
    return !($(this).val().length >= $(this).attr('maxlength'));
});
0
Nick B