web-dev-qa-db-fra.com

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

Existe-t-il un moyen de forcer le clavier numérique à apparaître au téléphone avec un <input type="text">? Je viens de me rendre compte que <input type="number"> dans HTML5 est destiné aux «nombres à virgule flottante», il ne convient donc 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 prenant des valeurs numériques autres que des nombres à virgule flottante. Existe-t-il peut-être un autre type approprié input qui le fait?

androidioskeyboardnumbershtml-input
144
Tami

Vous pouvez 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 édition pour iOS

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

182
Seth Stone

À 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:

 enter image description here

Il vous donne également le comportement attendu du bureau avec les boutons fléchés haut/bas et l'incrémentation des touches fléchées haut/bas respectant le clavier:

 enter image description here

Essayez-le dans cet extrait de code:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

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

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

Si vous devez pouvoir entrer des zéros, des virgules ou des lettres - par exemple, les 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-numeric-pavé numérique/

115
Aaron Gray

J'ai constaté que, du moins pour les champs de type "mot de passe", faire quelque chose comme <input type="tel" /> finit par produire le champ le plus authentique numéro - et présente également l'avantage 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:

iPhone Web Application Display with an Input Tag Having a Type of TEL which Produces a very Decent Numeric Keyboard as Opposed to Type Number which is Autoformatted and Has a Somewhat Less Intuitive Input Configuration

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

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

50
Gabriel Ryan Nahmias

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

11
Niklas

L'utilisation du <input type="text" pattern="\d*"> pour afficher le clavier numérique présente un danger. Sur Firefox et Chrome, l’expression régulière contenue dans le modèle force le navigateur à valider l’entrée de cette expression. des erreurs se produiront si le motif ne correspond pas ou s'il est laissé vide. Soyez conscient des actions inattendues dans les autres navigateurs.

8
Mike

Pour moi, la meilleure solution était:

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

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

Vous voudrez peut-être aussi faire cela pour cacher les fileuses dans firefox/chrome/safari, la plupart des clients pensent qu’elles 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 effectuez une validation personnalisée

Ps juste au cas où vous vouliez réellement des nombres à virgule flottante après tout, ajoutez la précision que vous désirez, '.' à Android

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

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

4
Cat Chen

En 2018:

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

travaille pour Android et iOS.

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

2
Shalika Akalanka

Vous pouvez essayer comme ça:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Mais faites attention: si votre entrée contient autre chose qu'un nombre, elle ne sera pas transmise au serveur.

0
alexwenzel

essaye ça:

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

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

0
Luiz Fernando Corrêa Leite

Je ne pouvais pas trouver le type qui me convenait le mieux dans toutes les situations: je devais utiliser par défaut une entrée numérique (entrée de "7.5" par exemple) mais aussi autoriser à certains moments le texte ("pass" par exemple). Les utilisateurs voulaient un clavier numérique (entrée de 7.5 par exemple) mais une saisie de texte occasionnelle était requise ("pass" par exemple).

Ce que j'ai plutôt fait, c’est d’ajouter une case à cocher au formulaire et de permettre à l’utilisateur de basculer mon entrée (id = "inputSresult") entre type = "numéro" et type = "texte".

<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 clic à la case à cocher qui bascule le type entre texte et numéro selon que la case ci-dessus est cochée ou non:

$(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.

0
Jeff Mergler