<input type="number"/> n'affiche pas un clavier numérique sur iOS

Question

Selon La documentation d'Apple lorsque je configure un élément d'entrée avec un type de number Je devrais acheter un clavier numérique.

<input type="number"/>

number : Un champ de texte pour spécifier un nombre. Fait apparaître un clavier de pavé numérique dans iOS 3.1 et plus.

C'est presque impossible de faire des erreurs. Cependant, lorsque je visualise ce simple bidouillage sur mon iPhone ou sur le simulateur (tous deux sous iOS6), le clavier numérique n'apparaît pas, et j'obtiens le clavier alphabétique standard à la place.

http://jsfiddle.net/Cy4aC/3/

Qu'est-ce que j'ai bien pu foirer ici ?

Answer 1

Après avoir lu et essayé de nombreuses idées, aucune de celles que j'ai trouvées n'a fonctionné pour afficher exactement le clavier avec les chiffres uniquement et la virgule ou le point.

J'ai fini en utilisant seulement <input type="number"> et un onkeyup sur cette entrée où je fais quelque chose comme ceci :

var previousValue = localStorage.getItem('myInputId');
if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) {
    input.value = previousValue || "";
}
localStorage.setItem('myInputId', input.value);

Cela empêche l'utilisateur d'écrire des caractères erronés en remplaçant la valeur par la précédente s'il y a une erreur de validité (je ne sais pas si c'est un objet iOS ou standard).

Attention, je n'ai pas testé ce bout de code car j'ai des choses plus complexes de mon côté, mais j'espère que vous comprendrez l'idée.

Avec cette solution :

• Sur iOS : l'utilisateur dispose d'un clavier classique complet mais ouvert par défaut sur les chiffres et ne peut pas écrire de mauvais caractères.
• Sur Android, le clavier numérique est parfait.
• Dans le futur, nous pouvons espérer que iOS déclenchera le bon clavier pour les chiffres et que la partie javascript ne sera jamais appelée.