it-swarm.com.de

Telefon: numerische Tastatur für die Texteingabe

Gibt es eine Möglichkeit, die Nummerntastatur für einen <input type="text"> am Telefon aufzurufen? Ich habe gerade erkannt, dass <input type="number"> in HTML5 für "Fließkommazahlen" ist 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 Fließkommazahlen annehmen. Gibt es vielleicht einen anderen geeigneten input-Typ, der das tut?

144
Tami

Sie können <input type="text" pattern="\d*"> tun. Dadurch wird die numerische Tastatur angezeigt.

Weitere Informationen finden Sie hier: Programmierhandbuch für Text, Web und Editing für iOS

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

182
Seth Stone

Ab Mitte 2015 glaube ich, dass dies die beste Lösung ist:

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

Dadurch erhalten Sie sowohl auf Android als auch auf iOS die numerische Tastatur:

 enter image description here

Sie erhalten auch das erwartete Desktop-Verhalten, indem Sie die Aufwärts-/Abwärtspfeiltasten und die auf die Abwärtspfeiltasten der Tastatur aufwärtsgerichtete Tasten drücken:

 enter image description here

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 type="number" und pattern="[0-9]* erhalten wir eine Lösung, die überall funktioniert. Und sein vorwärtskompatibles mit dem zukünftig vorgeschlagenen inputmode-Attribut HTML 5.1.

Hinweis: Die Verwendung eines Musters löst die Überprüfung des nativen Formulars des Browsers aus. Sie können dies mithilfe des novalidate-Attributs deaktivieren oder die Fehlermeldung für eine fehlgeschlagene Überprüfung mithilfe des title-Attributs anpassen.


Wenn Sie führende Nullen, Kommas oder Buchstaben eingeben müssen, z. B. internationale Postleitzahlen - check out diese geringfügige Variante .


Credits und weiterführende Literatur:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/http://danielfriesen.name/blog/2013/09/19/input -typ-nummer-und-ios-numerische tastatur/

115
Aaron Gray

Ich habe herausgefunden, dass zumindest bei "passcode" -ähnlichen Feldern so etwas wie <input type="tel" /> zu tun ist, dass das authentischste nummer - orientierte Feld erzeugt wird, und es hat auch den Vorteil ohne Autoformatierung . In einer mobilen Anwendung, die ich kürzlich für Hilton entwickelt habe, habe ich zum Beispiel Folgendes getan:

iPhone Web Application Display with an Input Tag Having a Type of TEL which Produces a very Decent Numeric Keyboard as Opposed to Type Number which is Autoformatted and Has a Somewhat Less Intuitive Input Configuration

... und mein Kunde war sehr beeindruckt.

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

50

Wenn Sie den type="email" oder type="url" verwenden, erhalten Sie zumindest bei einigen Telefonen, z. Für Telefonnummern können Sie type="tel" verwenden.

11
Niklas

Es besteht die Gefahr, dass mit <input type="text" pattern="\d*"> die numerische Tastatur 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. Achten Sie auf unbeabsichtigte Aktionen in anderen Browsern.

8
Mike

Für mich war die beste Lösung:

Für ganzzahlige Zahlen, die das 0-9-Pad auf Android und iPhone anzeigen

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

Möglicherweise möchten Sie dies auch tun, um die Spinner in Firefox/Chrome/Safari zu verbergen. Die meisten Kunden glauben, dass sie hässlich aussehen

 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 Überprüfung durchführen

Ps, nur für den Fall, dass Sie tatsächlich Fließkommazahlen wollten, steigen Sie mit der von Ihnen gewünschten Genauigkeit ein. auf Android

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

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

4
Cat Chen

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

2

Sie können es so 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 übermittelt.

0
alexwenzel

versuche dies:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

referenz: https://answers.laserfiche.com/questions/88002/Use-Nummer-Feld-Eingabeart-mit-Feld-Mask

Ich konnte keinen Typ finden, der für mich in allen Situationen am besten geeignet war: Ich musste die numerische Eingabe vorgeben (Eingabe von "7.5"), aber auch zu bestimmten Zeiten Text zulassen ("Pass"). Die Benutzer wünschten eine numerische Tastatur (Eingabe von beispielsweise 7,5), jedoch war gelegentlich eine Texteingabe erforderlich (beispielsweise "Pass").

Vielmehr habe ich ein Kontrollkästchen zum Formular hinzugefügt und dem Benutzer erlaubt, 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 Click-Handler mit dem Kontrollkästchen verbunden, das den Typ zwischen Text und Zahl umschaltet, je nachdem, ob das Kontrollkästchen oben 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 für uns gut funktioniert.

0
Jeff Mergler