web-dev-qa-db-fra.com

Le type d'entrée "numéro" ne sera pas redimensionné

Pourquoi mon entrée ne redimensionne-t-elle pas lorsque je change le type en type="number" mais cela fonctionne avec type="text"?

EXEMPLE

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">
61
SaturnsEye

On dirait que le type input type number ne prend pas en charge l'attribut size ou qu'il n'est pas compatible avec les navigateurs. Vous pouvez le définir via CSS:

input[type=number]{
    width: 80px;
} 

Violon mis à jour

64
Felix

Utilisation incorrecte.

Le numéro de type d'entrée est conçu pour avoir une valeur sélectionnable via les flèches haut et bas.

Donc, fondamentalement, vous recherchez un style CSS "width".

Historiquement, le texte en entrée est mis en forme avec une police à espacement unique. Par conséquent, la taille correspond également à la largeur.

Le numéro d'entrée est nouveau et la propriété "taille" n'a aucun sens *. Un usage typique:

<input type="number" name="quantity" min="1" max="5">

docs w3c

pour corriger, ajouter un style:

<input type="number" name="email" style="width: 7em">

EDIT: si vous voulez une plage, vous devez définir type="range" et pas ="number"

EDIT2: * taille n'est pas une valeur autorisée (donc, pas de sens). Départ officiel spécifications du W3C

Remarque: L'attribut size fonctionne avec les types de saisie suivants: texte, recherche, tel, url, email et mot de passe.

Conseil: Pour spécifier le nombre maximum de caractères autorisés dans l'élément, utilisez l'attribut maxlength.

37
MrPk

Plutôt que de définir la longueur, définissez les valeurs max et min pour la saisie du nombre.

La zone de saisie est ensuite redimensionnée pour correspondre à la valeur valide la plus longue.

Si vous souhaitez autoriser un nombre à 3 chiffres, définissez 999 comme valeur maximale.

 <input type="number" name="quantity" min="0" max="999">
14
Michael

Pour <input type=number> , selon le CR HTML5, l’attribut size n’est pas autorisé. Cependant, dans Obsolete Features , il est indiqué: "Les auteurs ne doivent pas, mais peuvent malgré les exigences contraires ailleurs dans cette spécification, spécifier les attributs maxlength et size sur les éléments d'entrée dont les attributs de type sont à l'état Number. Une raison valable pour utiliser ces attributs, peu importe, est d'aider les agents utilisateurs hérités qui ne prennent pas en charge les éléments d'entrée avec type = "number" à restituer le champ de texte avec une largeur utile. "

Ainsi, l'attribut size peut être utilisé, mais il n'affecte que les navigateurs plus anciens qui ne supportent pas type=number, pour que l’élément retombe dans un simple contrôle de texte, <input type=text>.

Cela s'explique par le fait que le navigateur doit fournir une interface utilisateur prenant en compte les autres attributs, pour une meilleure convivialité. Comme les implémentations peuvent varier, toute taille imposée par un auteur peut tout gâcher. (Cela s'applique également à la définition de la largeur du contrôle en CSS.)

La conclusion est que vous devriez utiliser <input type=number> dans une configuration plus ou moins fluide qui ne fait aucune hypothèse sur les dimensions de l’élément.

5
Jukka K. Korpela