Téléphone: clavier numérique pour l'entrée de texte

vous pouvez faire <input type="text" pattern="\d*"> . Cela va entraîner le clavier numérique à apparaître.

Voir ici pour plus de détails: du Texte, le Web et l'Édition de Guide de Programmation pour iOS

à partir de mi-2015, je crois 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:

il vous donne également le comportement de bureau prévu avec les boutons Flèche Haut/Bas et clavier conviviale Flèche Haut/Bas touche incrementing:

en combinant à la fois type="number" et pattern="[0-9]* , nous obtenons une solution qui fonctionne partout. Et, son forward compatible avec le futur attribut HTML 5.1 proposé inputmode .

Note: L'utilisation d'un motif déclenche la validation du formulaire natif du navigateur. Vous pouvez désactiver cela en utilisant l'attribut novalidate , ou vous pouvez personnaliser le message d'erreur pour une validation échouée en utilisant l'attribut title .

si vous devez être en mesure d'entrer des zéros, des virgules ou des lettres - par exemple, les codes postaux internationaux - cochez cette variante légère .

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-numeric-keypad /

j'ai trouvé que, au moins pour"passcode "-comme les champs, faire quelque chose comme <input type="tel" /> finit par produire le plus authentique nombre - domaine orienté et il a également le bénéfice de pas d'autoformatting . Par exemple, dans une application mobile que j'ai développée pour Hilton récemment, j'ai fini par aller avec ceci:

... et mon client était très impressionné.

en utilisant le type="email" ou type="url" vous donnera un clavier sur certains téléphones au moins, tels que l'iPhone. Pour les numéros de téléphone, vous pouvez utiliser type="tel" .

il y a un danger à utiliser le <input type="text" pattern="\d*"> pour élever le clavier numérique. Sur firefox et chrome, l'expression régulière contenue dans le pattern permet au navigateur de valider l'entrée de cette expression. erreurs se produisent si elle ne correspond pas au modèle ou est laissé vide. Soyez conscient des actions involontaires dans d'autres navigateurs.

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

pour moi, la meilleure solution était:

pour les nombres entiers, qui apporte le bloc 0-9 sur android et iphone

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

vous pouvez aussi vouloir faire cela pour cacher les fileurs dans firefox / chrome / safari, la plupart des clients pensent 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 ajouter novalidate= 'novalidate' à votre élément de formulaire, si vous faites une validation personnalisée

Ps juste au cas où vous vouliez vraiment flotter les nombres de points après tout, un pas à n'importe quelle précision que vous voulez, ajoutera '."pour android

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

en 2018:

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

fonctionne pour Android et iOS.

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

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, il ne sera pas transmis au serveur.

Je ne pouvais pas trouver un type qui fonctionnait le mieux pour moi dans toutes les situations: je devais par défaut à l'entrée numérique (entrée de" 7.5"par exemple) mais aussi à certains moments permettent le texte ("passer" par exemple). Les utilisateurs voulaient un clavier numérique (entrée de 7,5 par exemple), mais une entrée de texte occasionnelle était nécessaire ("passer" par exemple).

plutôt ce que j'ai fait était d'ajouter une case à cocher à la forme et permettre à l'utilisateur de basculer mon entrée (id= "inputSresult") entre le type= "nombre" 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 à la case à cocher qui bascule le type entre le texte et le numéro en fonction de si la case à cocher 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.