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

Existe-t-il un moyen de forcer le clavier numérique à apparaître sur le téléphone pour un <input type="text">? Je viens de me rendre compte qu'en <input type="number">HTML5 est destiné aux «nombres à virgule flottante», donc il ne convient pas aux numéros de carte de crédit, aux codes postaux, etc.

Je souhaite émuler la fonctionnalité de clavier numérique de <input type="number">, pour les entrées qui prennent des valeurs numériques autres que des nombres à virgule flottante. Y a-t-il peut-être un autre inputtype approprié qui fait cela?

Vous pouvez le faire <input type="text" pattern="\d*">. Cela fera apparaître le clavier numérique.

Voir ici pour plus de détails: Guide de programmation de texte, Web et d'édition pour iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

À la mi-2015, je pense 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 attendu du bureau avec les boutons fléchés haut / bas et les touches fléchées haut / bas conviviales pour le clavier:

Essayez-le dans cet extrait de code:

<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, il est compatible avec le futur inputmodeattribut proposé HTML 5.1 .

Remarque: l'utilisation d'un modèle déclenchera la validation du formulaire natif du navigateur. Vous pouvez désactiver cela à l'aide de l' novalidateattribut ou personnaliser le message d'erreur en cas d'échec de la validation à l'aide de l' titleattribut.

Si vous avez besoin de pouvoir saisir des zéros, des virgules ou des lettres non significatifs, par exemple des codes postaux internationaux, consultez cette légère variante .

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- clavier numérique/

J'ai trouvé que, au moins pour les champs de type "code d'accès", faire quelque chose comme <input type="tel" />finit par produire le champ le plus authentique orienté vers les nombres et cela a également l'avantage de ne pas mettre en forme automatique . Par exemple, dans une application mobile que j'ai récemment développée pour Hilton, j'ai fini par utiliser ceci:

... et mon client a été très impressionné.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

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

Il y a un danger à utiliser <input type="text" pattern="\d*">pour faire apparaître le clavier numérique. Sur Firefox et Chrome, l'expression régulière contenue dans le modèle oblige le navigateur à valider l'entrée de cette expression. des erreurs se produiront s'il ne correspond pas au modèle ou s'il est laissé vide. Soyez conscient des actions involontaires dans d'autres navigateurs.

<input type="text" inputmode="numeric">

Avec Inputmode, vous pouvez donner un indice au navigateur.

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

Pour moi, la meilleure solution était:

Pour les nombres entiers, ce qui fait apparaître le pavé 0-9 sur Android et iPhone

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

Vous pouvez également le faire pour masquer les filateurs dans firefox / chrome / safari, la plupart des clients trouvent 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 ajoutez novalidate = 'novalidate' à votre élément de formulaire, si vous faites une validation personnalisée

Ps juste au cas où vous vouliez réellement des nombres à virgule flottante après tout, passez à la précision que vous souhaitez, ajoutera '.' à android

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

En 2018:

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

fonctionne à la fois 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, elle ne sera pas transmise au serveur.

Je ne pouvais pas trouver un type qui fonctionnait le mieux pour moi dans toutes les situations: je devais par défaut une entrée numérique (entrée de "7.5" par exemple) mais aussi à certains moments autoriser le texte ("passer" par exemple). Les utilisateurs voulaient un pavé numérique (entrée de 7,5 par exemple) mais une saisie de texte occasionnelle était requise («pass» par exemple).

J'ai plutôt ajouté une case à cocher au formulaire et permettre à l'utilisateur de basculer mon entrée (id = "inputSresult") entre type = "number" et type = "text".

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

Ensuite, j'ai câblé un gestionnaire de clics à la case à cocher qui bascule le type entre le texte et le nombre en fonction du fait que la case 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.

 <input type="text" inputmode="decimal">

il vous donnera une saisie de texte à l'aide du clavier numérique

Vous pouvez utiliser l' inputmodeattribut html:

<input type="text" inputmode="numeric" />

Pour plus de détails, consultez le document MDN en mode d'entrée .

essaye ça:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

référez-vous: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask