Telefon: Zifferntastatur zur Texteingabe

176

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 inputTyp, der das tut?

Tami
quelle
Es gibt immer noch keine gute Antwort für Postleitzahlen. Ich habe diese Frage speziell für internationale Postleitzahlen hier erneut gestellt: stackoverflow.com/questions/25425181/…
Ryan McGeary
Ich dachte , einen hackish Ausweg dieses ..sort tun von: stackoverflow.com/a/25599024/1922144
davidcondrey
Ab Mitte 2015 gibt es einen besseren Weg, dies zu tun: stackoverflow.com/a/31619311/806956
Aaron Gray

Antworten:

205

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

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

Seth Stone
quelle
22
Wenn Sie nur die numerische Tastatur möchten, aber nicht validieren möchten (z. B. in Chrome), können Sie das Attribut novalidate in das Formular einfügen. <form ... novalidate>
Brian
4
Ich habe festgestellt, dass \d*das nicht funktioniert und [0-9]erforderlich ist. Beachten Sie, dass dies mit funktioniert type='numeric'. Dies wird basierend auf der Referenz für verknüpfte Dokumente für die Postleitzahl vorgeschlagen.
Brett Ryan
11
Dies funktioniert so lange, wie Sie NUR numerische Werte benötigen. Gleitkommazahlen, für die ein '.' (oder ',' für einige Regionen) kann nicht eingegeben werden, da die Tastatur diese Zeichen nicht enthält.
DrHall
2
Wenn ich verwenden muss. (Punkt), wie kann ich es verwenden? Dieses Muster zeigt nur [0-9]
15
<input type = "text" pattern = "\ d *"> funktioniert nicht auf Android? Ich habe auf iOS getestet und erfolgreich gearbeitet, aber nicht auf Android. Wie kann ich es lösen
Kamal
155

Ab Mitte 2015 halte ich dies für die beste Lösung:

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

Dadurch erhalten Sie den Ziffernblock sowohl für Android als auch für iOS:

Geben Sie hier die Bildbeschreibung ein

Es gibt Ihnen auch das erwartete Desktop-Verhalten mit den Pfeiltasten nach oben / unten und der tastaturfreundlichen Inkrementierung der Pfeiltasten nach oben / unten:

Geben Sie hier die Bildbeschreibung ein

Versuchen Sie es in diesem Code-Snippet:

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

Durch die Kombination von beidem type="number"und erhalten pattern="[0-9]*wir eine Lösung, die überall funktioniert. Und es ist vorwärtskompatibel mit dem zukünftigen vorgeschlagenen HTML 5.1- inputmodeAttribut.

Hinweis: Die Verwendung eines Musters löst die native Formularüberprüfung des Browsers aus. Sie können dies mithilfe des novalidateAttributs deaktivieren oder die Fehlermeldung für eine fehlgeschlagene Überprüfung mithilfe des titleAttributs 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/

Aaron Gray
quelle
1
Die HTML5- type="number" Spezifikation besagt, dass die folgenden Inhaltsattribute nicht angegeben werden dürfen und nicht für das Element gelten: ... inputmode
Tgr
2
@ Tgr Ahh, guter Fang. Es scheint, dass die Spezifikation die Benutzer verwenden soll <input type="text" inputmode="numeric">und dass mobile Browser inputmodeprüfen sollen, ob ein Nummernblock oder eine vollständige Tastatur angezeigt wird. Da keine Browser unterstützt werden inputmode, 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.
Aaron Gray
2
Die Unterstützung für type="number"ist anständig , zeigt jedoch möglicherweise einen Spinner an, der beispielsweise für Kreditkartennummern wenig sinnvoll ist.
Tgr
2
Type = "number" zu haben ist ein Schmerz im Arsch X (. Wenn die Eingabe ungültig ist, können Sie den Wert der Eingabe in JS nicht abrufen, Sie können die Cursorposition nicht abrufen usw.
Nicu Surdu
2
This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
Michael Laffargue
61

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:

iPhone-Webanwendungsanzeige mit einem Eingabe-Tag mit einem TEL-Typ, der eine sehr anständige numerische Tastatur erzeugt, im Gegensatz zu einer Typnummer, die automatisch formatiert ist und eine etwas weniger intuitive Eingabekonfiguration aufweist

... und mein Kunde war sehr beeindruckt.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

Gabriel Ryan Nahmias
quelle
4
Das Problem war für mich nicht die automatische Formatierung, sondern die Validierung. Die Eingabe des Typs numbererzwingt 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 JavaScript input.valuewird leer sein. Die Eingabe des Typs telist 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).
Nux
Wie kann ich Dezimalzahlen in dieser Tastatur verwenden
Anto
11

Wenn Sie das type="email"oder verwenden type="url", erhalten Sie zumindest auf einigen Telefonen, z. B. dem iPhone, eine Tastatur. Für Telefonnummern können Sie verwenden type="tel".

Niklas
quelle
9

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.

Mike
quelle
6
Das Hinzufügen eines novalidateAttributs zum Enthalten form elementsollte sich mit den Problemen der automatischen Validierung befassen. Stellen Sie sicher, dass Sie selbst eine Validierung durchführen.
Justus Romijn
7
<input type="text" inputmode="numeric">

Mit Inputmode können Sie dem Browser einen Hinweis geben.

Ralf de Kleine
quelle
4

Ich denke, es type="number"ist das Beste für semantische Webseiten. Wenn Sie nur die Tastatur ändern möchten, können Sie type="number"oder verwenden type="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.

Katze Chen
quelle
8
Das Problem, das ich habe, ist, dass type = "number" nur für Gleitkommazahlen gedacht ist - also keine Kreditkarten, Postleitzahlen oder eine Reihe anderer Zahlen, nur Zeichenfolgen. Ich hatte gehofft, dass es sowohl eine semantische Art der Codierung als auch die richtige Tastaturanzeige gibt. Ich denke, der geeignete Typ wäre input type = "text", aber dann wird die falsche Tastatur angezeigt. Wenn Sie mich auf ein Javascript verweisen könnten, um dies zu tun, würde dies beide Probleme lösen.
Tami
2
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?
Cat Chen
6
Eine Sache, auf die Sie bei type = "number" achten sollten, ist, dass Chrome zumindest die Eingabe als Zahl erzwingt - wodurch Kreditkartennummern, die mit Leerzeichen eingegeben wurden (z. B.),
John Carter,
8
@therefromhere Es wird auch Postleitzahlen drehen wie 01920zu 1920.
Ceejayoz
Es wird auch durcheinander kommen, wenn der Benutzer eine andere Sprache in seinem Browser eingestellt hat. stackoverflow.com/questions/5345095/…
dalore
4

Für mich war die beste Lösung:

Für Ganzzahlen, wodurch das 0-9-Pad auf Android und iPhone angezeigt wird

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

Vielleicht möchten Sie dies auch tun, um die Spinner in Firefox / Chrome / Safari zu verstecken. Die meisten Kunden finden sie hässlich

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

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

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
aqm
quelle
1

Im Jahr 2018:

<input type="number" pattern="\d*">

arbeitet sowohl für Android als auch für iOS.

Ich habe auf Android (^ 4.2) und iOS (11.3) getestet

Shalika Akalanka
quelle
0

Sie können Folgendes versuchen:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Aber seien Sie vorsichtig: Wenn Ihre Eingabe etwas anderes als eine Nummer enthält, wird sie nicht an den Server übertragen.

alexwenzel
quelle
0

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.

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

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:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

Das hat bei uns gut geklappt.

Jeff Mergler
quelle
0
 <input type="text" inputmode="decimal">

Es gibt eine Texteingabe über die numerische Tastatur

Chamin Thilakarathne
quelle