Comment puis-je définir la longueur maximale d'un élément HTML5 "input type=number" ?

Question

Pour <input type="number"> élément, maxlength ne fonctionne pas. Comment puis-je restreindre le maxlength pour cet élément numérique ?

Answer 1

Et vous pouvez ajouter un max qui spécifiera le nombre le plus élevé possible que vous pouvez insérer.

<input type="number" max="999" />

si vous ajoutez à la fois un max et un min vous pouvez spécifier la plage des valeurs autorisées :

<input type="number" min="1" max="999" />

Ce qui précède sera toujours no empêcher un utilisateur de saisir manuellement une valeur en dehors de la plage spécifiée. Au lieu de cela, une fenêtre popup s'affichera pour lui demander de saisir une valeur comprise dans cette plage lors de la soumission du formulaire, comme le montre cette capture d'écran :

Answer 2

Vous pouvez spécifier le min y max qui n'autorisent la saisie que dans une plage spécifique.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

Toutefois, cela ne fonctionne que pour les boutons de commande de la toupie. Bien que l'utilisateur puisse être en mesure de taper un nombre supérieur à la limite autorisée, le bouton de contrôle de la tournette ne fonctionne pas. max le formulaire ne sera pas soumis.

Capture d'écran prise de Chrome 15

Usted peut utiliser le HTML5 oninput en JavaScript pour limiter le nombre de caractères :

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

Answer 3

Si vous êtes à la recherche d'un Web mobile dans laquelle vous souhaitez que votre utilisateur dispose d'un pavé numérique plutôt que d'un clavier complet. Utilisez type="tel". Il fonctionnera avec maxlength, ce qui vous évitera de créer du javascript supplémentaire.

Max et Min permettra toujours à l'utilisateur de saisir des nombres supérieurs à Max et Min, ce qui n'est pas optimal.

Answer 4

Vous pouvez combiner tous ces éléments comme ceci :

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

Mise à jour :
Vous pourriez également vouloir empêcher la saisie de tout caractère non numérique, car object.length serait une chaîne vide pour les entrées numériques, et sa longueur serait donc de 0 . Ainsi, le maxLengthCheck ne fonctionnera pas.

Solution :
Voir este o este par exemple.

Démo - Voir la version complète du code ici :
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Mise à jour 2 : Voici le code de mise à jour : https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Mise à jour 3 : Veuillez noter que le fait d'autoriser la saisie de plus d'un point décimal peut perturber la valeur numérique.

Answer 5

C'est très simple, avec un peu de javascript, vous pouvez simuler une maxlength vérifiez-le :

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />