web-dev-qa-db-fra.com

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

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

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

J'ai intégré le site dans une WebView pour une éventuelle consommation Android 2.1, de sorte qu'il s'agisse également d'une application Android.

Est-il possible d’obtenir le clavier avec des chiffres à la place du clavier par défaut avec des lettres lorsque cet élément HTML input est activé?

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?

androidhtmlwebviewkeyboardhtml-input
83
ncakmak
<input type="number" />
<input type="tel" />

Les deux présentent le clavier numérique lorsque l’entrée devient active.

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

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

101
Richard Kernahan

NOTE IMPORTANTE

Je publie ceci comme une réponse, pas un commentaire, car il s’agit d’une information assez importante et qui 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 attend un nombre commençant par des zéros, tel que 000222, elle risque alors d’être gênée par le fait que certains navigateurs (par exemple, Google Desktop) enverront au serveur 222, ce qui n'est pas ce qu'elle veut.

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

46
user907860

Cela devrait marcher. 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 jquerymobile-framework, le clavier était correctement affiché 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.

PDATE: 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é. Ce doit être un bug ...

8
Jesper Grann Laursen

Certains navigateurs envoient des zéros au serveur lorsque le type d’entrée est "numéro". Donc, j'utilise un mélange de jquery et html pour charger un clavier numérique et je m'assure é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">
2
Ali Sheikhpour