Comment imposer maxlength sur zone de texte en HTML à l’aide de JavaScript

Question

Je voudrais avoir quelques fonctionnalités qui, si j'écris

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

il sera automatiquement imposer la maxlength sur le textArea. Si possible, veuillez ne pas fournir la solution en jQuery.

Remarque: Ceci peut être fait si je fais quelque chose comme ceci:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

Copié à partir de Quel est le meilleur moyen d'émuler une entrée HTML "maxlength" attribut HTML textarea?

Mais le point est que je ne veux pas écrire onKeyPress et onKeyUp à chaque fois que je déclarer un textArea.

Answer 1

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA') 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  } 
}

Answer 2

Je sais que vous voulez éviter de jQuery, mais comme la solution nécessite JavaScript, cette solution (à l’aide de jQuery 1.4) est la plus concise et robuste.

Inspirée, mais une amélioration au cours de la réponse de Dana Woodman :

Passe de que les réponses sont : simplifiée et plus générique, à l’aide de jQuery.live et à ne pas val si la longueur est OK (conduit à travail-touches fléchées dans IE et l’accélération notable dans IE) :

Answer 3

Mise à jour Utiliser la solution de Eirik utilisant `` plutôt que c’est un peu plus robuste.

---

Même si vous voulez une solution qui n’était pas à l’aide de jQuery, je pensais que je voudrais ajouter un en pour toute personne de trouver cette page par Google et la recherche d’une solution de jQuery-esque :

Espoir qui vous sera utile Googlers là-bas...

Answer 4

HTML5 ajoute une attribuent à la élément, comme suit :

C’est actuellement pris en charge dans Chrome 13, 5 FF et Safari 5. Sans surprise, ce n’est pas supporté dans IE 9. (Testé sur Win 7)

Answer 5

Il s’agit d’un code tordu, je me sers juste sur mon site. Il est amélioré pour afficher le nombre de caractères restants à l’utilisateur.

(Désolé encore d’OP qui ont demandé pas de jQuery. Mais sérieusement, qui n’est pas utiliser jQuery ces jours-ci ?)

A pas été testé avec les caractères multi-octets internationaux, donc je ne sais pas comment cela fonctionne exactement avec ceux.