web-dev-qa-db-fra.com

Définir la longueur maximale dans la zone de texte HTML

Comment puis-je définir le maxlength dans un textarea? Et pourquoi maxlength ne fonctionne pas correctement dans textarea?

htmlinputtextarea
49
Hitesh Prajapati

Avant HTML5, nous avons un moyen simple mais pratique: définissez d'abord un attribut maxlength dans l'élément textarea:

<textarea maxlength='250' name=''></textarea>

Utilisez ensuite JavaScript pour limiter les entrées utilisateur:

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length > maxLength) {  
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

Assurez-vous de lier les événements "input" et "propertychange" pour le faire fonctionner sur divers navigateurs tels que Firefox/Safari et IE.

96
aqingsao

Si vous utilisez HTML 5, vous devez le spécifier dans votre déclaration DOCTYPE .

Pour un document HTML 5 valide, il doit commencer par:

<!DOCTYPE html>

Avant HTML 5, l'élément textarea n'avait pas d'attribut maxlength.

Vous pouvez le voir dans le DTD/spec :

<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  %reserved;                           -- reserved for possible future use --
  >

Afin de limiter le nombre de caractères saisis dans un textarea, vous devrez utiliser javascript avec l'événement onChange. Vous pouvez ensuite compter le nombre de caractères et interdire la saisie ultérieure.

Ici est une discussion approfondie sur la saisie de texte et comment utiliser les scripts côté serveur et client pour limiter la taille.

Ici est un autre exemple.

17
Oded

un moyen simple de faire maxlength pour textarea en html4 est:

<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>

Changez le "100" pour autant de caractères que vous voulez

11
Dss

Comme je l'ai dit dans un commentaire à la réponse de aqingsao, cela ne fonctionne pas vraiment quand le textarea a des caractères de nouvelle ligne, au moins sous Windows.

J'ai légèrement changé sa réponse ainsi:

$(function() {
    $("textarea[maxlength]").bind('input propertychange', function() {
        var maxLength = $(this).attr('maxlength');
        //I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
        //Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
        var newlines = ($(this).val().match(/\n/g) || []).length
        if ($(this).val().length + newlines > maxLength) {
            $(this).val($(this).val().substring(0, maxLength - newlines));
        }
    })
});

Maintenant, quand j'essaie de coller beaucoup de données avec des sauts de ligne, j'obtiens exactement le bon nombre de caractères.

7
Coxy
$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
    if ($(this).val().length > maxlen) {  
      return false;
    }  
  })
});
1
Sony Aja
<p>
   <textarea id="msgc" onkeyup="cnt(event)" rows="1" cols="1"></textarea> 
</p> 
<p id="valmess2" style="color:red" ></p>

function cnt(event)
{ 
 document.getElementById("valmess2").innerHTML=""; // init and clear if b < max     
allowed character 

 a = document.getElementById("msgc").value; 
 b = a.length; 
 if (b > 400)
  { 
   document.getElementById("valmess2").innerHTML="the max length of 400 characters is 
reached, you typed in  " + b + "characters"; 
  } 
}

maxlength n'est valable que pour HTML5. Pour HTML/XHTML, vous devez utiliser JavaScript et/ou PHP. Avec PHP vous pouvez utiliser strlen par exemple. Cet exemple indique uniquement la longueur maximale, il ne bloque PAS l'entrée.

0
Maxtor

essaye ça

$(function(){
  $("textarea[maxlength]")
    .keydown(function(event){
       return !$(this).attr("maxlength") || this.value.length < $(this).attr("maxlength") || event.keyCode == 8 || event.keyCode == 46;
    })
    .keyup(function(event){
      var limit = $(this).attr("maxlength");

      if (!limit) return;

      if (this.value.length <= limit) return true;
      else {
        this.value = this.value.substr(0,limit);
        return false;
      }    
    });
});

Pour moi, fonctionne vraiment parfait sans sauter/montrer des personnages supplémentaires; fonctionne exactement comme maxlength en entrée

0
smnbbrv

Avant HTML5, il est uniquement possible de vérifier cela avec JavaScript ou par une vérification côté serveur (mieux, car JavaScript ne fonctionne évidemment qu'avec JavaScript activé ...). Il n'y a pas d'attribut natif de longueur maximale pour les zones de texte.

Étant donné que HTML5 est un attribut valide, il peut être utile de définir votre doctype en HTML5. Je ne sais pas si tous les navigateurs prennent en charge cet attribut, cependant:

<!DOCTYPE html>
0
acme