Type d'entrée HTML5 = nombre supprime le zéro non significatif
Dans Chrome 15, lors de l'utilisation de l'élément en tant que champ de texte, les zéros de tête (par exemple, 011) sont supprimés, même si le nombre entré ne rompt pas les règles de validation (par exemple, min, max). Existe-t-il un attribut pour forcer le zéro à rester dans le champ après qu’il ait perdu le focus? L'application utilisée est des données numériques telles que les préfixes téléphoniques internationaux.
<input type="text" pattern="[0-9]*" ...
cela devrait le faire pour vous. Amènera le clavier numérique sur iPhone et les téléphones Android plus agréables sur lesquels j'ai testé.
<input type="tel"> a été introduit dans ce but précis. C'est l'un des nouveaux types de saisie en HTML5.
J'en avais besoin pour les navigateurs mobiles et j'ai utilisé un mélange des deux solutions suivantes:
<input type="tel" pattern="[0-9]*">
Sur iOS, le clavier numérique apparaît avec uniquement des chiffres disponibles (aucun symbole # ou *), tandis que sur les téléphones Android, le "tel" est interprété correctement mais pas le motif (pas encore sur les quelques téléphones dont je dispose).
Je suppose que lorsque les navigateurs Android commenceront à implémenter l'attribut "pattern", cela devrait également fonctionner correctement sur Android (comme la spécification whatwg suggère ).
Jusque-là, vous devrez rechercher des caractères non numériques dans votre entrée et les supprimer. javascript replace (/ [^ 0-9 *]/g, '') est utile pour cela.
j'espère que cela t'aides
La réponse fournie par le WHATWG dans IRC était que pour les données non numériques (par exemple, non float/int) de nature numérique, le texte est généralement le type d’entrée correct à utiliser. L’exception est si vous utilisez quelque chose où un type de saisie spécifique (par exemple, numéros de téléphone, dates) existe déjà.
type d'entrée = nombre ne doit être utilisé que pour les entrées qui sont littéralement des nombres (int), et non des données qui utilisent des chiffres (tels que des codes postaux).
8 ans plus tard ...
Il faut se méfier:
Les réponses avec l'utilisation de type="tel"ne ne résolvent pas complètement le problème, en particulier dans le cas de champs numériques dans lesquels vous pouvez écrire des nombres décimaux/décimaux et d'autres caractères autorisés (comme + -.,).
Solution:
Envisagez d’utiliser la saisie de texte avec pattern et inputmode comme ceci:
<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">
Détails:
Ce modèle aidera à garder les 0 en tête et à se comporter comme un champ numérique (avec tous les autres caractères autorisés).
Et le inputmode="numeric" tirera le clavier numérique au lieu du clavier par défaut.