web-dev-qa-db-fra.com

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

Selon la documentation d'Apple lorsque je configure un élément d'entrée avec un type de number, je devrais obtenir un clavier numérique.

<input type="number"/>

number: Un champ de texte pour spécifier un nombre. Affiche un clavier numérique sous iOS 3.1 et versions ultérieures.

On dirait presque impossible de gâcher. Cependant, lorsque je visualise ce simple violon sur mon iPhone ou le simulateur (les deux iOS6), le clavier numérique n'apparaît pas et je reçois le clavier alphabétique standard.

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

Qu'est-ce que j'aurais pu foirer ici?

enter image description here

ioshtml5
51
Alex Wayne

Vous devez spécifier le motif:

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

Comme number pourrait aussi bien être négatif ou avec une virgule flottante, le - et . et , devrait être disponible sur le clavier, à moins que vous ne spécifiiez un modèle composé uniquement de chiffres.

enter image description here

108
Majid Laissi

D'après mon expérience, cela est très incohérent entre les navigateurs. iOS a fait des va-et-vient entre cette prise en charge correcte pour mon cas d'utilisation. En général, je souhaite simplement que le clavier affiché par défaut soit numérique. La dernière fois que j'ai vérifié, utiliser input type = "number" appelle correctement le clavier numérique, mais l'attribut "size" est ignoré, ce qui éloigne mal le format de mon portable. J'ai ajouté un attribut à toutes les entrées que le clavier numérique utiliserait par défaut, et jQuery a été utilisé pour modifier tout attribut (c'est-à-dire type = "numéro") lorsque le navigateur détecte qu'il fonctionne correctement. De cette façon, je n'ai pas à revenir en arrière et à mettre à jour les entrées individuelles et je ne peux l'appliquer que dans les navigateurs pris en charge.

Ce serait bien si les principaux systèmes d'exploitation mobiles avaient un attribut pour "clavier par défaut" en plus du type d'entrée. Que se passe-t-il si un utilisateur entre une adresse ou un code postal? Généralement, ceux-ci commencent par des chiffres. Il est donc utile d'afficher le clavier numérique par défaut, mais de permettre N'IMPORTE QUEL texte. 

En ce qui concerne la validation, je ne peux pas compter sur le navigateur pour prendre en charge la validation pour des types d'entrée spécifiques, aussi j'utilise javascript et la validation côté serveur.

2
Derek Henry

Je ne sais pas si c'est ce que vous voulez, mais entrez type = "tel" vous donnera le "pavé numérique".

2
pIkEL

Après avoir lu et essayé de nombreuses idées, rien de ce que j'ai trouvé ne permet de montrer exactement le clavier avec chiffres uniquement et le coma ou le point.

J'ai fini d'utiliser juste <input type="number"> et un gestionnaire 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 incorrects en remplaçant la valeur par la valeur précédente en cas d'erreur de validité (je ne sais pas s'il s'agit d'un objet iOS ou d'un standard).

méfiez-vous, je n'ai pas testé cet extrait de code, car j'ai des problèmes plus complexes, mais j'espère que vous en aurez 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.
  • À l'avenir, nous pouvons espérer qu'iOS déclenchera le bon clavier pour les chiffres et que la partie javascript ne sera jamais appelée.
0
Guillaume Gendre

Salutations. Je sais que cette question est ancienne, mais j’ai estimé que c’était une solution très recherchée et j’ai décidé de poster une réponse.

Voici une solution que j'ai créée pour adresser le clavier iPad ainsi que presque tout.

En outre, cette approche ne nécessite pas que vous utilisiez une entrée de type qui, à mon humble avis, est très laide.

Vous trouverez ci-dessous une version fonctionnelle.

Pensées sur les touches du clavier Apple iPad ...

J'ai dû créer un gestionnaire d'événements keyPress pour capturer et supprimer les clés de l'iPad qui ne semblent pas être gérées par l'événement keyDown ou qui sont ambiguës ???!

// Bind keydown event to all input type=text in form.
$("form input[type=text]").keydown(function (e) {

// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;


// When user presses the shiftKey...
if(e.shiftKey) {

//...supress its click and whatever key follows after it.
console.log(e.shiftKey + ' and ' + key + ' supressed.');

// Deny
return false;

// ONLY Allow Numbers, Numberpad, Backspace & Tab
} else if ( (key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9) ) {

// Allow
return true;

} else {

// Deny every other key and/or shift + key combination NOT explicitly declared.
return false;
}

});


// KeyPresss to handle remaining iPAD keyboard keys!
// These keys don't seem to be handled by the keyDown event or are ambiguous???!
// Bind keypress event to all input type=text in form.
$("form input[type=text]").keypress(function (e) {

// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;

switch (key) {

// Character -> ^
case 94:
return false;

// Character -> #
case 35:
return false;

// Character -> $
case 36:
return false;

// Character -> @
case 64:
return false;

// Character -> &
case 38:
return false;

// Character -> *
case 42:
return false;

// Character -> (
case 40:
return false;

// Character -> )
case 41:
return false;

// Character -> %
case 37:
return false;

// Character -> !
case 33:
return false;

}


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">

<label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label>
<input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4">

</form>

0
ASPiRE