Telefon: Zifferntastatur zur Texteingabe

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?

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>

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:

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:

<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/

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.

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

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".

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.

<input type="text" inputmode="numeric">

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

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.

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" />

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

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.

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.

 <input type="text" inputmode="decimal">

Es gibt eine Texteingabe über die numerische Tastatur

Versuche dies:

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

Siehe: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask