Comment forcer le clavier avec des chiffres sur un site Web mobile sous Android


92

J'ai un site Web mobile et il contient des inputéléments HTML , comme ceci:

<input type="text" name="txtAccessoryCost" size="6" />

J'ai intégré le site dans une WebViewéventuelle consommation Android 2.1, de sorte que ce sera également une application Android.

Est-il possible d'obtenir le clavier avec des chiffres au lieu de celui par défaut avec des lettres lorsque cet inputélément HTML est focalisé?

Ou est-il possible de le définir pour l'ensemble de l'application (peut-être quelque chose dans le fichier Manifest ), si ce n'est pas faisable pour un élément HTML?


Si vous voulez un clavier numérique sur iOS en plus d'Android, vous devez le faire: stackoverflow.com/a/31619311/806956
Aaron Gray

2
L' inputmode="number"attribut semble être la bonne réponse à la fin de 2019: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… . La réponse la plus votée au moment de ce commentaire suggère type="number", ce qui comporte certains de ses propres écueils; inputmodesemble avoir un impact uniquement sur l'affichage du clavier virtuel, plutôt que sur le comportement / les contraintes de l'entrée elle-même.
SheffDoinWork

Réponses:


113
<input type="number" />
<input type="tel" />

Les deux présentent le pavé numérique lorsque l'entrée obtient le focus.

<input type="search" /> affiche un clavier normal avec un bouton de recherche supplémentaire

Tout le reste semble faire apparaître le clavier standard.


Je vais y jeter un coup d'œil aujourd'hui, puis vous dira si cela fonctionne. Merci, Richard!
ncakmak

1
Salut Richard. Aucun n'a fonctionné, le champ de saisie ouvre toujours le clavier standard.
ncakmak


1
Notez que le clavier pour type="tel"est pire pour taper des nombres que le clavier pour type="number".
Rory O'Kane

2
<input type="text" pattern="\d*" /> fait également apparaître le clavier numérique, mais uniquement sur iOS, pas sur Android .
Rory O'Kane

51

NOTE IMPORTANTE

Je publie ceci comme une réponse, pas un commentaire, car c'est une information assez importante et cela attirera plus d'attention dans ce format.

Comme d'autres personnes l'ont souligné, vous pouvez forcer un appareil à vous montrer un clavier numérique avec type="number"/ type="tel", mais je dois souligner que vous devez être extrêmement prudent avec cela.

Si quelqu'un s'attend à un nombre commençant par des zéros, par exemple 000222, il est susceptible d'avoir des problèmes, car certains navigateurs (Chrome de bureau, par exemple) enverront au serveur 222, ce qui n'est pas ce qu'elle veut.

A propos de type="tel"je ne peux rien dire de similaire mais personnellement je ne l'utilise pas, car son comportement sur différents téléphones peut varier. Je me suis cantonné au simple pattern="[0-9]*"qui ne fonctionne pas sous Android


4
Le reformatage automatique ne se produit probablement pas avec type="tel". La spécification note qu'elle teln'applique aucune syntaxe particulière, contrairement à number, qui nécessite que sa valeur soit un nombre à virgule flottante valide .
Rory O'Kane

À quel point est-ce mauvais? Nous essayons d'accélérer le processus de formulaire pour nos clients mobiles et cela semble être une solution évidente, mais nous voulons aussi quelque chose de fiable. Vous avez mis en garde contre l'utilisation de cette méthode. Je me demande si vous pourriez élaborer un peu plus là-dessus?
Philll_t

@Philll_t, un utilisateur doit envoyer des données '000222', mais vous, côté serveur, obtenez '222' à la place. Ne voyez-vous pas que la fonctionnalité est complètement cassée? Le serveur obtient des données erronées.
user907860

Oui, je vois ce que vous voulez dire, mais ce que je dis, c'est: quel pourcentage d'utilisateurs voient cela? Est-ce un problème sur les principaux navigateurs mobiles tels que Safari et Chrome? Comment savez-vous que c'est un problème, existe-t-il un lien que vous pouvez fournir. Je vous crois, je veux juste faire des recherches moi-même et je n'ai rien vu de suggérer cela, peut-être que vous pouvez m'indiquer la bonne direction. Nous essayons simplement de voir si notre clientèle n'en bénéficiera pas.
Philll_t

1
@Philll_t Je pense que le meilleur exemple de cet avertissement concerne les champs de saisie Date de naissance. Où vous devez saisir manuellement le jour, le mois et l'année. Et oui, il y a encore beaucoup de sites Web qui utilisent ce style au lieu des sélecteurs de dates couramment utilisés. En ce qui concerne le problème sur les champs de saisie Date de naissance, c'est lorsque vous entrez votre jour ou mois commençant par "0", par exemple 08.
Robin Carlo Catacutan

9

Cela devrait fonctionner. Mais j'ai les mêmes problèmes sur un téléphone Android.

<input type="number" /> <input type="tel" />

J'ai découvert que si je n'incluais pas le framework jquerymobile, le clavier s'affichait correctement sur les deux types de champs.

Mais je n'ai pas trouvé de solution pour résoudre ce problème, si vous avez vraiment besoin d'utiliser jquerymobile.

MISE À JOUR: J'ai découvert que si la balise de formulaire est stockée hors du

<div data-role="page"> 

Le clavier numérique n'est pas affiché. Cela doit être un bug ...


Merci d'avoir creusé cela. Je ne suis pas sûr de comprendre cependant: "si le form-tag est stocké hors du div [data-role = page]". Dans mon cas, le problème se produit avec des formulaires qui sont bien imbriqués dans un div [data-role = page]. Peut-être que le problème est que ces pages sont affichées, dans mon cas, sous forme de boîtes de dialogue?
Wytze


3

Certains navigateurs envoient un zéro au serveur lorsque le type d'entrée est "nombre". J'utilise donc un mélange de jquery et de html pour charger un clavier numérique et m'assurer également que la valeur est envoyée sous forme de texte et non sous forme de nombre:

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">


3
Cela provoque un problème ennuyeux sur Chrome pour Android. Lorsque vous appuyez sur l'entrée, le clavier ne pas venir. Vous devez ensuite taper sur la zone de texte une deuxième fois, puis le clavier propose le clavier numérique uniquement. Je souhaite vraiment que nous ayons une type="digits"option pour ne pas avoir à avoir ces hacks. Je veux dire, ce n'est pas comme si un nombre sans tête est si rare (les codes postaux aux États-Unis en sont un exemple évident).
Jaxidian

2
Je fais face au même problème aussi! définir le champ sur "type = tel" est la meilleure solution à ce jour.
Ali Sheikhpour

-2

input type = number

Lorsque vous souhaitez fournir une entrée numérique, vous pouvez utiliser la valeur d'attribut HTML5 input type = "number".

<input type="number" name="n" />

Voici le clavier qui apparaît sur l'iPhone 4:

Capture d'écran iPhone du numéro de type d'entrée HTML5 Android 2.2 utilise ce clavier pour type = number:

Capture d'écran Android du numéro de type d'entrée HTML5


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.