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

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?

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

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

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

inputmodeselon WHATWG spec est la méthode par défaut.

Pour les appareils iOS, l'ajout patternpourrait également aider.

Pour la compatibilité descendante, utilisez typeégalement depuis Chrome les utiliser à partir de la version 66.

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

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">

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

Ajouter un attribut d'étape à l'entrée numérique

<input type="number" step="0.01">

Source: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html