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

À compter de la mi-2015, je crois que c'est la meilleure solution:

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

Cela vous donnera le pavé numérique à la fois Android et iOS:

Il vous donne également le bureau attendu comportement avec les touches haut/bas et un clavier convivial flèche haut/bas touche incrémentation:

Essayer dans cet extrait de code:

HTML:

<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, de son avant compatible avec la future HTML 5.1 proposé inputmode attribut.

Remarque: l'Utilisation d'un modèle de déclencher le navigateur natif de la validation du formulaire. Vous pouvez désactiver cette fonction à l'aide de la novalidate attribut, ou vous pouvez personnaliser le message d'erreur échec de la validation à l'aide de la title attribut.

---

Si vous avez besoin d'être en mesure de saisir les zéros non significatifs, des virgules, ou de lettres internationale, par exemple, des codes postaux - découvrez cette variante légère.

---

Crédits et plus lecture:

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

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

Pour moi, la meilleure solution était:

Pour des nombres entiers, ce qui amène le 0-9 pad sur android et iphone

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

Vous pouvez aussi le faire pour cacher les fileuses dans firefox/chrome/safari, la plupart des clients pensent qu'ils 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 ajouter novalidate='novalidate" pour votre élément de formulaire, si vous faites de validation personnalisée

Ps juste au cas où vous en fait voulu des nombres à virgule flottante après tout,l'étape de quelle que soit la précision de fantaisie, d'ajouter un '.' pour android

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

2018:

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

est à la fois pour Android et iOS.

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

Je n'arrivais pas à trouver un type qui a le mieux fonctionné pour moi dans toutes les situations: j'avais besoin de défaut pour numérique entrée (entrée de "7.5", par exemple), mais aussi, à certains moments, permettent au texte ("pass" par exemple). Les utilisateurs voulais un clavier numérique (entrée de 7,5 par exemple) mais il y a parfois de saisie de texte a été nécessaire ("pass" par exemple).

Plutôt ce que j'ai fait a été d'ajouter une case à cocher pour la forme et de permettre à l'utilisateur de basculer mon entrée (id="inputSresult") entre type="number" et type="texte".

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

Puis j'ai câblé un gestionnaire de clic sur la case à cocher qui permet de basculer le type entre le texte et le numéro de la base si la case 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.