Comment forcer le clavier avec les chiffres dans un site web mobile sous Android ?

Question

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

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

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

Est-il possible d'obtenir le clavier avec des chiffres au lieu du clavier par défaut avec des lettres lorsque ce HTML input L'élément est ciblé ?

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

Answer 1

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

Tous deux présentent le clavier numérique lorsque l'entrée est mise en évidence.

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

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

Answer 2

NOTE IMPORTANTE

Je poste ceci en tant que réponse, et non en tant que commentaire, car il s'agit d'une information plutôt importante et elle attirera davantage l'attention dans ce format.

Comme d'autres collègues l'ont fait remarquer, 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 ça.

Si quelqu'un s'attend à un nombre commençant par des zéros, tel que 000222 alors elle risque d'avoir des problèmes, car certains navigateurs (Chrome de bureau, par exemple) envoient 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é à la simple pattern="[0-9]*" qui ne fonctionnent pas sous Android

Answer 3

inputmode en fonction de Spécification du WHATWG est la méthode par défaut.

Pour les appareils iOS, ajouter pattern pourrait aussi aider.

Pour la compatibilité ascendante, utilisez type également, puisque Chrome les utilise depuis la version 66.

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

Answer 4

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 jquerymobile-framework, 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.

UPDATE : J'ai découvert que si la balise de formulaire est stockée en dehors de l'espace de travail de l'utilisateur.

<div data-role="page"> 

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

Answer 5

Certains navigateurs n'envoient pas de zéro au serveur lorsque le type de saisie est "nombre". J'utilise donc un mélange de jquery et de html pour charger un clavier numérique et m'assurer que la valeur est envoyée comme un texte et non comme un 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">