Téléphone: clavier numérique pour la saisie de texte

178

Existe-t-il un moyen de forcer le clavier numérique à apparaître sur le téléphone pour un <input type="text">? Je viens de me rendre compte qu'en <input type="number">HTML5 est destiné aux «nombres à virgule flottante», donc il ne convient pas aux numéros de carte de crédit, aux codes postaux, etc.

Je souhaite émuler la fonctionnalité de clavier numérique de <input type="number">, pour les entrées qui prennent des valeurs numériques autres que des nombres à virgule flottante. Y a-t-il peut-être un autre inputtype approprié qui fait cela?

Tami
la source
Il n'y a toujours pas de bonne réponse pour les codes postaux. J'ai re-posé cette question spécifiquement pour les codes postaux internationaux ici: stackoverflow.com/questions/25425181/…
Ryan McGeary
J'ai trouvé un moyen hackish de le faire .. tri de: stackoverflow.com/a/25599024/1922144
davidcondrey
À la mi-2015, il existe une meilleure façon de procéder: stackoverflow.com/a/31619311/806956
Aaron Gray

Réponses:

206

Vous pouvez le faire <input type="text" pattern="\d*">. Cela fera apparaître le clavier numérique.

Voir ici pour plus de détails: Guide de programmation de texte, Web et d'édition pour iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Pierre de Seth
la source
23
Si vous voulez juste le clavier numérique mais ne voulez pas valider (comme dans Chrome), vous pouvez mettre l'attribut novalidate sur le formulaire. <form ... novalidate>
Brian
4
J'ai constaté que \d*cela ne fonctionne pas et [0-9]est nécessaire. Notez que cela fonctionnera avec type='numeric'. Ceci est suggéré en fonction de la référence des documents liés pour le code postal.
Brett Ryan
11
Cela fonctionne tant que vous n'avez besoin que de valeurs numériques. Les nombres à virgule flottante qui nécessitent un "." (ou ',' pour certaines régions) ne peuvent pas être saisis car leur clavier n'inclut pas ces caractères.
DrHall
2
Si j'ai besoin d'utiliser. (point), comment puis-je l'utiliser? ce modèle montre seulement [0-9]
15
<input type = "text" pattern = "\ d *"> ne fonctionne pas sur Android? J'ai testé sur iOS et travaillé avec succès mais je n'ai pas fonctionné sur Android. comment puis-je le résoudre
kamal
158

À la mi-2015, je pense que c'est la meilleure solution:

<input type="number" pattern="[0-9]*" inputmode="numeric">

Cela vous donnera le clavier numérique sur Android et iOS:

entrez la description de l'image ici

Il vous donne également le comportement attendu du bureau avec les boutons fléchés haut / bas et les touches fléchées haut / bas conviviales pour le clavier:

entrez la description de l'image ici

Essayez-le dans cet extrait de code:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

En combinant les deux type="number"et pattern="[0-9]*, nous obtenons une solution qui fonctionne partout. Et, il est compatible avec le futur inputmodeattribut proposé HTML 5.1 .

Remarque: l'utilisation d'un modèle déclenchera la validation du formulaire natif du navigateur. Vous pouvez désactiver cela à l'aide de l' novalidateattribut ou personnaliser le message d'erreur en cas d'échec de la validation à l'aide de l' titleattribut.


Si vous avez besoin de pouvoir saisir des zéros, des virgules ou des lettres non significatifs, par exemple des codes postaux internationaux, consultez cette légère variante .


Crédits et lectures complémentaires:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- clavier numérique/

Aaron Gray
la source
1
La type="number" spécification HTML5 indique que les attributs de contenu suivants ne doivent pas être spécifiés et ne s'appliquent pas à l'élément: ... inputmode
Tgr
2
@Tgr Ahh, bonne prise. Il semble que la spécification souhaite que les gens les utilisent <input type="text" inputmode="numeric">et que les navigateurs mobiles les examinent inputmodepour déterminer si elles affichent un pavé numérique ou un clavier complet. Comme aucun navigateur ne prend en charge inputmode, je ne sais pas comment il sera mis en œuvre sur les navigateurs de bureau par rapport aux navigateurs mobiles. Ex: les navigateurs de bureau autoriseront-ils la saisie de lettres <input type="text" inputmode="numeric">? Si c'est le cas, c'est un problème. <input type="number">empêche cela, n'autorisant que les nombres. Nous devrons peut-être attendre que les navigateurs commencent à l'implémenter, puis nous pourrons mettre à jour cette réponse.
Aaron Gray
2
Le support pour type="number"est décent , mais il peut afficher un spinner qui n'a pas beaucoup de sens pour, par exemple, les numéros de carte de crédit.
Tgr
2
Avoir type = "number" est une douleur dans le cul X (. Si l'entrée n'est pas valide, vous ne pourrez pas obtenir la valeur de l'entrée dans JS, vous ne pouvez pas obtenir la position du curseur, etc.
Nicu Surdu
2
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Michael Laffargue
61

J'ai trouvé que, au moins pour les champs de type "code d'accès", faire quelque chose comme <input type="tel" />finit par produire le champ le plus authentique orienté vers les nombres et cela a également l'avantage de ne pas mettre en forme automatique . Par exemple, dans une application mobile que j'ai récemment développée pour Hilton, j'ai fini par utiliser ceci:

Affichage d'application Web iPhone avec une balise d'entrée ayant un type de TEL qui produit un clavier numérique très décent par opposition au numéro de type qui est automatiquement formaté et a une configuration d'entrée un peu moins intuitive

... et mon client a été très impressionné.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Gabriel Ryan Nahmias
la source
4
Le problème pour moi n'était pas le formatage automatique, mais la validation. La saisie du type numberimpose des règles strictes pour le nombre dans de nombreux navigateurs. Si l'utilisateur ajoute un espace (ou une virgule) pour séparer les milliers, vous n'obtiendrez AUCUNE valeur de l'entrée. Oui, même en JavaScript input.valuesera vide. La saisie du type teln'est pas limitée à un format spécifique, de sorte que l'utilisateur peut toujours saisir quoi que ce soit et la validation est un processus distinct (que le développeur doit gérer).
Nux
Comment puis-je utiliser des nombres décimaux dans ce clavier
Anto
11

L'utilisation du type="email"ou type="url"vous donnera au moins un clavier sur certains téléphones, comme l'iPhone. Pour les numéros de téléphone, vous pouvez utiliser type="tel".

Niklas
la source
9

Il y a un danger à utiliser <input type="text" pattern="\d*">pour faire apparaître le clavier numérique. Sur Firefox et Chrome, l'expression régulière contenue dans le modèle oblige le navigateur à valider l'entrée de cette expression. des erreurs se produiront s'il ne correspond pas au modèle ou s'il est laissé vide. Soyez conscient des actions involontaires dans d'autres navigateurs.

Mike
la source
6
L'ajout d'un novalidateattribut sur le conteneur form elementdevrait résoudre les problèmes de validation automatique. Assurez-vous de faire une validation par vous-même.
Justus Romijn
7
<input type="text" inputmode="numeric">

Avec Inputmode, vous pouvez donner un indice au navigateur.

Ralf de Kleine
la source
4

Je pense que type="number"c'est le meilleur pour la page Web sémantique. Si vous souhaitez simplement changer de clavier, vous pouvez utiliser type="number"ou type="tel". Dans les deux cas, l'iPhone ne restreint pas l'entrée de l'utilisateur. L'utilisateur peut toujours taper (ou coller) les caractères qu'il souhaite. Le seul changement est le clavier montré à l'utilisateur. Si vous souhaitez une restriction au-delà de cela, vous devez utiliser JavaScript.

Chat Chen
la source
8
Le problème que j'ai est que type = "number" n'est censé être que pour les nombres à virgule flottante - donc pas de cartes de crédit, codes postaux ou une multitude d'autres nombres uniquement des chaînes. J'espérais qu'il y avait à la fois une manière sémantique de l'encoder et de créer le bon affichage du clavier. Le type approprié, je pense, serait input type = "text" mais alors le mauvais clavier s'affiche. Si vous pouviez m'indiquer du javascript pour le faire, cela résoudrait les deux problèmes.
Tami
2
type="number"est pour le flotteur. type="text"est pour la chaîne. Ce que vous voulez vraiment, c'est un entier. Je pense que float est plus proche d'un entier que d'une chaîne. Qu'est-ce que tu penses?
Cat Chen
6
Une chose dont il faut se méfier avec type = "number" est que Chrome forcera au moins l'entrée à être un nombre - ce qui cassera les numéros de carte de crédit entrés avec des espaces (par exemple)
John Carter
8
@therefromhere Il tournera également zip codes comme 01920à 1920.
ceejayoz
cela
gâchera
4

Pour moi, la meilleure solution était:

Pour les nombres entiers, ce qui fait apparaître le pavé 0-9 sur Android et iPhone

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

Vous pouvez également le faire pour masquer les filateurs dans firefox / chrome / safari, la plupart des clients trouvent qu'ils ont l'air moche

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

Et ajoutez novalidate = 'novalidate' à votre élément de formulaire, si vous faites une validation personnalisée

Ps juste au cas où vous vouliez réellement des nombres à virgule flottante après tout, passez à la précision que vous souhaitez, ajoutera '.' à android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
aqm
la source
1

En 2018:

<input type="number" pattern="\d*">

fonctionne à la fois pour Android et iOS.

J'ai testé sur Android (^ 4.2) et iOS (11.3)

Shalika Akalanka
la source
0

Vous pouvez essayer comme ceci:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Mais attention: si votre entrée contient autre chose qu'un nombre, elle ne sera pas transmise au serveur.

Alexwenzel
la source
0

Je ne pouvais pas trouver un type qui fonctionnait le mieux pour moi dans toutes les situations: je devais par défaut une entrée numérique (entrée de "7.5" par exemple) mais aussi à certains moments autoriser le texte ("passer" par exemple). Les utilisateurs voulaient un pavé numérique (entrée de 7,5 par exemple) mais une saisie de texte occasionnelle était requise («pass» par exemple).

J'ai plutôt ajouté une case à cocher au formulaire et permettre à l'utilisateur de basculer mon entrée (id = "inputSresult") entre type = "number" et type = "text".

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

Ensuite, j'ai câblé un gestionnaire de clics à la case à cocher qui bascule le type entre le texte et le nombre en fonction du fait que la case ci-dessus est cochée:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

Cela a bien fonctionné pour nous.

Jeff Mergler
la source
0
 <input type="text" inputmode="decimal">

il vous donnera une saisie de texte à l'aide du clavier numérique

Chamin Thilakarathne
la source
0

Vous pouvez utiliser l' inputmodeattribut html:

<input type="text" inputmode="numeric" />

Pour plus de détails, consultez le document MDN en mode d'entrée .

Afaz Khatri
la source
Cette réponse propose la même solution proposée par @Ralf de Kleine
xKobalt