zeigen numerische Tastatur in iPhone mit Eingabetext

Question

Beachten Sie, dass input type="number" wie unten eine numerische Tastatur angezeigt werden kann:

Ist es möglich, input type="text" zu verwenden, um die gleiche numerische Tastatur angezeigt werden? I nicht wollen ein Nummernfeld mit pattern="\d*" anzeigen, da es möglich ist, dass der Wert eine Dezimalstelle enthält.

Der Grund, warum ich input type="text" anstelle von input type="number" verwenden möchte ist, dass ich den Wert nicht zurückbekommen kann, wenn ich eine Nicht-Nummer für ein Nummernfeld eingabe. Zum Beispiel, wenn ich ABC eingeben, wird es automatisch leer. Es scheint mir, dass die Verwendung von input type="text" für diese Art von Kontrolle einfacher sein wird.

Answer 1

Ich konnte keine Lösung für das ab sofort finden.

Aber ein möglicher Trick, den Sie tun könnten, ist type = "number" und ändern Sie es in Javascript mit document.getElementById ("Element"). Type = "text";

aber aber dies würde auch das ABC klar, aber es wäre Zahlen Komma akzeptieren und Dezimalzahlen

Answer 2

Es gibt andere Arten, die numerische Tastatur angezeigt werden kann.

Mit type = "number" können Sie nichts tun. Es akzeptiert nur Zahlen. Aber wenn du type = "tel" benutzt, ist es ein hässlicher Hack, aber es funktioniert.

Hier ist mein Postleitzahl Beispiel:

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6"> 

Es wird jedoch ein Problem mit seinem „-“ Taste auf einigen Bildschirmtastaturen, können Sie dieses Problem umgehen, mit dem Hinzufügen des Bindestrichs nach Anzahl der Zeichen in JavaScript angegeben wie folgt:

// Zip Code dashes 
$('input[type="tel"].zipCode').keyup(function(event) { 
    var t = event.target, v = t.value; 
    if (v.length == 2) { t.value = v + '-'; } 
}); 

(Bitte entschuldigen Sie jQuery). Anstatt type = "tel" zu verwenden, können Sie type = "text" und Mustereigenschaft verwenden, aber ich habe es noch nicht getestet. Wahrscheinlich würde es bei den meisten Browsern nicht funktionieren.

Answer 3

Wenn Ihre Eingabe eine echte Zahl, eine Ganzzahl oder eine Dezimalzahl ist, verwenden Sie den HTML5-Eingang type="number". Dadurch wird die richtige Tastatur auf Android-Geräten angezeigt (nehmen Sie auch Windows Phone an).

Dann ist der Trick, eine pattern="[0-9]*" auf dieses Attribut zu setzen, um die spezielle numerische Tastatur auf iOS zu erzwingen. Beachten Sie, dass:

1. Dies wird nicht eine Dezimalzahl markieren oder Minus-Zeichen als ungültig, da das Muster Attribut actualy nicht gültig an einem Typ ist = „Nummer“! und
2. Dies ist die ONLY Weg, um die iOS-numerische Tastatur zu erhalten. Sehen Sie den Unterschied zwischen dem Zahlenbereich der Alphatastatur (wie in Ihrem Screenshot oben) und der echten numerischen Tastatur.

Eine letzte Anmerkung, sollten Sie für die Eingänge die Art Nummernfeld nicht zu verwenden, die nicht wahr Zahlen sind (zB. Zipcodes mit führenden Nullen oder Produktcodes mit Komas oder Leerzeichen). Ein numerisches Eingabefeld darf KEINE Werte übergeben, die keine wahren Zahlen sind! (je nach Browser/Gerät)

Answer 4

Probieren Sie dieses Workarround aus. Arbeitete für mich.

Es wird Typ zu Nummer drehen und dann zurück zum Text. Dadurch wird erzwungen, dass ios bei der ersten Prop-Änderung zu numerischer Tastatur wechselt. Die setSelectionRange ist für die Auswahl des Eingabewerts.

$(function(){ 

    $("input[type='text']").on('mouseup', function(e){ 
     e.preventDefault(); 
    }); 

    $("input[type='text']").on('focus click', function(e){ 
     $(this).prop('type', 'number'); 
     var obj = $(this); 
     setTimeout(function(){ 
      obj.prop('type', 'text'); 
      document.getElementById(obj.attr('id')).setSelectionRange(0, 9999); 
     }, 50);  
    }); 
}); 

Answer 5

Verwendung dieser Code:

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