Ich habe eine mobile Website und sie enthält einige HTML- input
Elemente wie diese:
<input type="text" name="txtAccessoryCost" size="6" />
Ich habe die Seite in einen WebView
mö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- input
Element 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?
inputmode="number"
Attribut scheint die richtige Antwort Ende 2019 zu sein: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… . Die Antwort mit der höchsten Stimmenzahl zum Zeitpunkt dieses Kommentars legt nahetype="number"
, was einige seiner eigenen Fallstricke mit sich bringt.inputmode
scheint nur die Anzeige der virtuellen Tastatur zu beeinflussen und nicht das Verhalten / die Einschränkungen der Eingabe selbst.Antworten:
Beide zeigen den Ziffernblock an, wenn der Eingang den Fokus erhält.
<input type="search" />
zeigt eine normale Tastatur mit einer zusätzlichen SuchtasteAlles andere scheint die Standardtastatur aufzurufen.
quelle
input
type
s der HTML-Spezifikation , einschließlichnumber
undtel
.type="tel"
das Eingeben von Zahlen schlechter ist als die Tastatur fürtype="number"
.<input type="text" pattern="\d*" />
ruft auch die numerische Tastatur auf, aber nur unter iOS, nicht unter Android .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"
/ anzuzeigentype="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 senden222
, 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, diepattern="[0-9]*"
in Android nicht funktionierenquelle
type="tel"
. In der Spezifikation wird darauf hingewiesen, dasstel
im Gegensatz zu einer bestimmten Syntax keine bestimmte Syntax erzwungennumber
wird. Der Wert muss eine gültige Gleitkommazahl sein .Das sollte funktionieren. Aber ich habe die gleichen Probleme auf einem Android-Handy.
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
Die Zifferntastatur wird nicht angezeigt. Das muss ein Fehler sein ...
quelle
inputmode
gemäß WHATWG-Spezifikation ist die Standardmethode.Für iOS-Geräte
pattern
könnte das Hinzufügen ebenfalls helfen.Verwenden Sie aus Gründen der Abwärtskompatibilität
type
auch diese, da Chrome diese ab Version 66 verwendet.quelle
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:
quelle
type="digits"
Option, damit wir diese Hacks nicht haben müssten. Ich meine, es ist nicht so, dass eine Null-führende Zahl so selten ist (Postleitzahlen in den USA sind ein offensichtliches Beispiel).input type = number
Wenn Sie eine Zahleneingabe bereitstellen möchten, können Sie den Attributwert HTML5 input type = "number" verwenden.
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
quelle
Fügen Sie der Zahleneingabe ein Schrittattribut hinzu
Quelle: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
quelle