Come forzare la tastiera con i numeri nel sito Web mobile in Android

Ho un sito web per dispositivi mobili e contiene alcuni inputelementi HTML , come questo:

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

Ho incorporato il sito in un WebViewpossibile consumo di Android 2.1, in modo che sia anche un'applicazione Android.

È possibile ottenere la tastiera con i numeri invece di quella predefinita con le lettere quando questo inputelemento HTML è focalizzato?

Oppure è possibile impostarlo per l'intera applicazione (forse qualcosa nel file Manifest ), se non è fattibile per un elemento HTML?

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

Entrambi presentano il tastierino numerico quando l'input diventa attivo.

<input type="search" /> mostra una tastiera normale con un pulsante di ricerca aggiuntivo

Tutto il resto sembra far apparire la tastiera standard.

NOTA IMPORTANTE

Sto postando questo come una risposta, non come un commento, poiché è un'informazione piuttosto importante e attirerà più attenzione in questo formato.

Come altri hanno sottolineato, puoi forzare un dispositivo a mostrarti una tastiera numerica con type="number"/ type="tel", ma devo sottolineare che devi essere estremamente cauto con questo.

Se qualcuno si aspetta un numero che inizia con zero, ad esempio 000222, è probabile che abbia problemi, poiché alcuni browser (Chrome desktop, ad esempio) invieranno al server 222, che non è quello che vuole.

A proposito type="tel"non posso dire nulla di simile ma personalmente non lo uso, in quanto il suo comportamento su telefoni diversi può variare. Mi sono limitato ai semplici pattern="[0-9]*"che non funzionano su Android

Questo dovrebbe funzionare. Ma ho gli stessi problemi su un telefono Android.

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

Ho scoperto che se non includevo il jquerymobile-framework, la tastiera veniva visualizzata correttamente sui due tipi di campi.

Ma non ho trovato una soluzione per risolvere questo problema, se hai davvero bisogno di usare jquerymobile.

AGGIORNAMENTO: Ho scoperto che se il form-tag è memorizzato fuori dal file

<div data-role="page"> 

Il tastierino numerico non viene visualizzato. Deve essere un bug ...

inputmodesecondo le specifiche WHATWG è il metodo predefinito.

Per i dispositivi iOS che aggiungono pattern potrebbe essere utile anche l' .

Per la compatibilità con le versioni precedenti, utilizzali typeanche poiché Chrome li utilizza a partire dalla versione 66.

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

Alcuni browser igoner inviano uno zero iniziale al server quando il tipo di input è "numero". Quindi uso un mix di jquery e html per caricare un tastierino numerico e assicurarmi anche che il valore venga inviato come testo e non come numero:

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

Quando si desidera fornire un input numerico, è possibile utilizzare il valore dell'attributo HTML5 input type = "number".

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

Ecco la tastiera che compare su iPhone 4:

Screenshot iPhone del numero di tipo di input HTML5 Android 2.2 utilizza questa tastiera per type = number:

Screenshot Android del numero del tipo di input HTML5

Aggiungi un attributo di passo all'input del numero

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

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