Gibt es eine Möglichkeit, die Zifferntastatur zu zwingen, für eine am Telefon zu erscheinen <input type="text">
? Ich habe gerade festgestellt, dass <input type="number">
HTML5 für Gleitkommazahlen steht und daher nicht für Kreditkartennummern, Postleitzahlen usw. geeignet ist.
Ich möchte die numerische Tastaturfunktionalität von <input type="number">
für Eingaben emulieren, die andere numerische Werte als Gleitkommazahlen annehmen. Gibt es vielleicht einen anderen geeigneten input
Typ, der das tut?
Antworten:
Das kannst du machen
<input type="text" pattern="\d*">
. Dadurch wird die numerische Tastatur angezeigt.Weitere Informationen finden Sie hier: Programmierhandbuch für Text, Web und Bearbeitung für iOS
quelle
\d*
das nicht funktioniert und[0-9]
erforderlich ist. Beachten Sie, dass dies mit funktionierttype='numeric'
. Dies wird basierend auf der Referenz für verknüpfte Dokumente für die Postleitzahl vorgeschlagen.Ab Mitte 2015 halte ich dies für die beste Lösung:
Dadurch erhalten Sie den Ziffernblock sowohl für Android als auch für iOS:
Es gibt Ihnen auch das erwartete Desktop-Verhalten mit den Pfeiltasten nach oben / unten und der tastaturfreundlichen Inkrementierung der Pfeiltasten nach oben / unten:
Versuchen Sie es in diesem Code-Snippet:
Durch die Kombination von beidem
type="number"
und erhaltenpattern="[0-9]*
wir eine Lösung, die überall funktioniert. Und es ist vorwärtskompatibel mit dem zukünftigen vorgeschlagenen HTML 5.1-inputmode
Attribut.Hinweis: Die Verwendung eines Musters löst die native Formularüberprüfung des Browsers aus. Sie können dies mithilfe des
novalidate
Attributs deaktivieren oder die Fehlermeldung für eine fehlgeschlagene Überprüfung mithilfe destitle
Attributs anpassen .Wenn Sie führende Nullen, Kommas oder Buchstaben eingeben müssen, z. B. internationale Postleitzahlen, sehen Sie sich diese geringfügige Variante an .
Credits und weiterführende Literatur:
http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- numerische Tastatur/
quelle
type="number"
Spezifikation besagt, dass die folgenden Inhaltsattribute nicht angegeben werden dürfen und nicht für das Element gelten: ... inputmode<input type="text" inputmode="numeric">
und dass mobile Browserinputmode
prüfen sollen, ob ein Nummernblock oder eine vollständige Tastatur angezeigt wird. Da keine Browser unterstützt werdeninputmode
, bin ich mir nicht sicher, wie es auf Desktop- oder mobilen Browsern implementiert werden soll. Beispiel: Ermöglichen Desktop-Browser das Eingeben von Briefen<input type="text" inputmode="numeric">
? Wenn ja, ist das ein Problem.<input type="number">
verhindert dies und erlaubt nur Zahlen. Vielleicht müssen wir warten, bis die Browser mit der Implementierung beginnen, und dann können wir diese Antwort aktualisieren.type="number"
ist anständig , zeigt jedoch möglicherweise einen Spinner an, der beispielsweise für Kreditkartennummern wenig sinnvoll ist.This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Ich habe gefunden, daß zumindest für „Passcode“ -ähnlichen Felder, etwas zu tun , wie
<input type="tel" />
endet das authentischste Herstellung Nummer -orientierten Feldes und es auch den Vorteil hat keine automatische Formatierung . In einer mobilen Anwendung, die ich kürzlich für Hilton entwickelt habe, habe ich beispielsweise Folgendes erreicht:... und mein Kunde war sehr beeindruckt.
quelle
number
erzwingt in vielen Browsern strenge Regeln für die Nummer. Wenn der Benutzer Leerzeichen (oder Kommas) hinzufügt, um Tausende zu trennen, erhalten Sie keinen Wert aus der Eingabe. Ja, auch in JavaScriptinput.value
wird leer sein. Die Eingabe des Typstel
ist nicht auf ein bestimmtes Format beschränkt, sodass der Benutzer weiterhin alles eingeben kann und die Validierung ein separater Prozess ist (der vom Entwickler durchgeführt werden muss).Wenn Sie das
type="email"
oder verwendentype="url"
, erhalten Sie zumindest auf einigen Telefonen, z. B. dem iPhone, eine Tastatur. Für Telefonnummern können Sie verwendentype="tel"
.quelle
Es besteht die Gefahr
<input type="text" pattern="\d*">
, dass die numerische Tastatur mit der Taste aufgerufen wird. Bei Firefox und Chrome bewirkt der im Muster enthaltene reguläre Ausdruck, dass der Browser die Eingabe für diesen Ausdruck überprüft. Fehler treten auf, wenn sie nicht mit dem Muster übereinstimmen oder leer bleiben. Beachten Sie unbeabsichtigte Aktionen in anderen Browsern.quelle
novalidate
Attributs zum Enthaltenform element
sollte sich mit den Problemen der automatischen Validierung befassen. Stellen Sie sicher, dass Sie selbst eine Validierung durchführen.Mit Inputmode können Sie dem Browser einen Hinweis geben.
quelle
Ich denke, es
type="number"
ist das Beste für semantische Webseiten. Wenn Sie nur die Tastatur ändern möchten, können Sietype="number"
oder verwendentype="tel"
. In beiden Fällen schränkt das iPhone die Benutzereingaben nicht ein. Der Benutzer kann weiterhin beliebige Zeichen eingeben (oder einfügen). Die einzige Änderung ist die Tastatur, die dem Benutzer angezeigt wird. Wenn Sie darüber hinaus Einschränkungen vornehmen möchten, müssen Sie JavaScript verwenden.quelle
type="number"
ist für float.type="text"
ist für Zeichenfolge. Was Sie wirklich wollen, ist eine Ganzzahl. Ich denke, float ist näher an der Ganzzahl als der String. Was denken Sie?01920
zu1920
.Für mich war die beste Lösung:
Für Ganzzahlen, wodurch das 0-9-Pad auf Android und iPhone angezeigt wird
Vielleicht möchten Sie dies auch tun, um die Spinner in Firefox / Chrome / Safari zu verstecken. Die meisten Kunden finden sie hässlich
Fügen Sie Ihrem Formularelement novalidate = 'novalidate' hinzu, wenn Sie eine benutzerdefinierte Validierung durchführen
Ps, nur für den Fall, dass Sie tatsächlich Gleitkommazahlen wollten, fügen Sie 'mit der gewünschten Genauigkeit hinzu' hinzu. zu Android
quelle
Im Jahr 2018:
arbeitet sowohl für Android als auch für iOS.
Ich habe auf Android (^ 4.2) und iOS (11.3) getestet
quelle
Sie können Folgendes versuchen:
Aber seien Sie vorsichtig: Wenn Ihre Eingabe etwas anderes als eine Nummer enthält, wird sie nicht an den Server übertragen.
quelle
Ich konnte keinen Typ finden, der in allen Situationen am besten für mich funktioniert: Ich musste standardmäßig eine numerische Eingabe verwenden (Eingabe von "7.5" zum Beispiel), aber auch zu bestimmten Zeiten Text zulassen (zum Beispiel "Bestehen"). Benutzer wollten einen Ziffernblock (z. B. Eingabe von 7,5), aber gelegentlich war eine Texteingabe erforderlich (z. B. "Bestanden").
Ich habe dem Formular vielmehr ein Kontrollkästchen hinzugefügt und dem Benutzer ermöglicht, meine Eingabe (id = "inputSresult") zwischen type = "number" und type = "text" umzuschalten.
Dann habe ich einen Klick-Handler mit dem Kontrollkästchen verbunden, der den Typ zwischen Text und Nummer umschaltet, je nachdem, ob das obige Kontrollkästchen aktiviert ist:
Das hat bei uns gut geklappt.
quelle
Es gibt eine Texteingabe über die numerische Tastatur
quelle
Versuche dies:
Siehe: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask
quelle