web-dev-qa-db-fra.com

quel type de champ de saisie oblige le clavier mobile du pavé numérique à apparaître lorsque la mise au point est effectuée?

J'ai essayé le <input type="number" />, mais sur Opera, qui produit une boîte de saisie étrange associée à un gestionnaire "haut et bas". Ce à quoi je m'attendais, c’était un champ de texte normal qui, une fois que vous vous concentrez sur celui-ci, affiche le clavier numérique au lieu des alphabets. Est-ce que c'est possible?

p.s. Je n'essaie pas de valider. Ce serait une belle expérience utilisateur, c'est tout.

htmlmobileoperatextinput
21
Ayyash

type = "nombre" est HTML5 et beaucoup de téléphones ne supportent pas HTML5. Pour le lien d'appel, vous pouvez utiliser type = "tel" ou <A href="wtai://wp/mc;600112233">Special A</A>. Vous devriez aussi regarder les extensions CSS WAP (page 56) . 

EDIT 10/2015:
La plupart sinon tous les téléphones intelligents prennent en charge HTML5 et CSS3, donc type="number" est la meilleure solution. 

13
fravelgue

Utilisez pattern="[0-9]*"

  • Exemple de saisie de numéro: <input type="number" pattern="[0-9]*" />

  • Exemple de saisie téléphonique: <input type="tel" pattern="[0-9]*" />

Remarque: Les navigateurs qui ne prennent pas en charge type="tel" utiliseront par défaut un type de texte.

Attention: L'utilisation de type="number" peut entraîner des problèmes de navigation et de difficulté d'utilisation pour les entrées de carte de crédit, de code postal et de téléphone lorsqu'un utilisateur peut être amené à saisir un signe de ponctuation ou une virgule.

Références:

22
Huski

Le moyen officiel pour gérer les numéros de téléphone au format HTML5 est:

<input type="tel">

Vous n’avez peut-être pas aimé la "zone de saisie étrange" que vous aviez avec Opera lorsque vous utilisiez<input type="number" />, mais c’est vraiment le type de zone de saisie approprié lorsque vous voulez demander aux visiteurs de saisir une valeur numérique.

19
Dori

Ce message est maintenant invalide. Tous les smartphones prennent désormais en charge HTML5 et CSS3. Par conséquent, l’ajout de type = "numéro" invite effectivement le pavé numérique à apparaître. Je viens de vérifier sur 2 versions différentes d'Android, et un iPhone. Juste pour que personne à l'avenir n'essaie WAP au lieu du format HTML5 correct.

9
Jeff Walters

Essayez <input type="number" pattern="/d*"> OU <input type="tel" pattern="/d*"> Cela vous aidera si vous travaillez avec Android.

0
souvik