So erzwingen Sie die Tastatur mit Zahlen auf der mobilen Website in Android

Ich habe eine mobile Website und sie enthält einige HTML- inputElemente wie diese:

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

Ich habe die Seite in einen WebViewmöglichen Android 2.1-Verbrauch eingebettet , so dass es sich auch um eine Android-Anwendung handelt.

Ist es möglich, die Tastatur mit Zahlen anstelle der Standardtastatur mit Buchstaben zu erhalten, wenn dieses HTML- inputElement fokussiert ist?

Oder ist es möglich, es für die gesamte Anwendung festzulegen (möglicherweise etwas in der Manifest-Datei ), wenn es für ein HTML-Element nicht möglich ist?

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

Beide zeigen den Ziffernblock an, wenn der Eingang den Fokus erhält.

<input type="search" /> zeigt eine normale Tastatur mit einer zusätzlichen Suchtaste

Alles andere scheint die Standardtastatur aufzurufen.

WICHTIGE NOTIZ

Ich poste dies als Antwort, nicht als Kommentar, da es sich um ziemlich wichtige Informationen handelt und es in diesem Format mehr Aufmerksamkeit erregen wird.

Wie andere Kollegen gezeigt haben, können Sie ein Gerät zwingen, Ihnen eine numerische Tastatur mit type="number"/ anzuzeigen type="tel", aber ich muss betonen, dass Sie dabei äußerst vorsichtig sein müssen.

Wenn jemand eine Zahl erwartet, die mit Nullen beginnt, wie z. B. 000222, hat er wahrscheinlich Probleme, da einige Browser (z. B. Desktop-Chrome) an den Server senden 222, was nicht das ist, was sie will.

Über type="tel"Ich kann nichts Ähnliches sagen, aber ich persönlich benutze es nicht, da sein Verhalten auf verschiedenen Telefonen variieren kann. Ich habe mich auf die einfachen beschränkt, die pattern="[0-9]*"in Android nicht funktionieren

Das sollte funktionieren. Aber ich habe die gleichen Probleme auf einem Android-Handy.

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

Ich fand heraus, dass, wenn ich das Jquerymobile-Framework nicht einbezog, die Tastatur auf den beiden Feldtypen korrekt angezeigt wurde.

Aber ich habe keine Lösung gefunden, um dieses Problem zu lösen, wenn Sie wirklich Jquerymobile verwenden müssen.

UPDATE: Ich habe herausgefunden, dass, wenn das Formular-Tag aus dem gespeichert ist

<div data-role="page"> 

Die Zifferntastatur wird nicht angezeigt. Das muss ein Fehler sein ...

inputmodegemäß WHATWG-Spezifikation ist die Standardmethode.

Für iOS-Geräte patternkönnte das Hinzufügen ebenfalls helfen.

Verwenden Sie aus Gründen der Abwärtskompatibilität typeauch diese, da Chrome diese ab Version 66 verwendet.

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

Einige Browser senden Iigoner, die eine führende Null an den Server senden, wenn der Eingabetyp "Nummer" ist. Daher verwende ich eine Mischung aus jquery und html, um einen Ziffernblock zu laden und sicherzustellen, dass der Wert als Text und nicht als Zahl gesendet wird:

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

Wenn Sie eine Zahleneingabe bereitstellen möchten, können Sie den Attributwert HTML5 input type = "number" verwenden.

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

Hier ist die Tastatur, die auf dem iPhone 4 angezeigt wird:

iPhone Screenshot der HTML5-Eingabetypnummer Android 2.2 verwendet diese Tastatur für Typ = Nummer:

Android Screenshot der HTML5-Eingabetypnummer

Fügen Sie der Zahleneingabe ein Schrittattribut hinzu

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

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