iPhone / iOS: Präsentation der HTML 5-Tastatur für Postleitzahlen

Es gibt verschiedene Tricks zum Anzeigen verschiedener Tastaturen auf Mobilgeräten für HTML 5-Eingaben (dh <input>Tags).

Einige sind beispielsweise auf der Apple-Website unter Konfigurieren der Tastatur für Webansichten dokumentiert .

Diese sind gut für die Benutzerfreundlichkeit, aber wenn es um eine Eingabe für internationale Postleitzahlen geht (meistens numerisch, aber Buchstaben erlaubt), bleiben uns einige schlechte Optionen. Die meisten Leute empfehlen, den pattern="\d*"Trick zu verwenden, um die numerische Tastatur anzuzeigen, aber das erlaubt keine Buchstabeneingabe.

Der type="number"Eingabetyp zeigt die normale Tastatur, wird jedoch in das numerische Layout verschoben:

Dies funktioniert gut für iOS-Geräte, lässt Chrome jedoch denken, dass die Eingabe eine Zahl sein muss, und ändert sogar das Verhalten der Eingabe (Erhöhen und Verringern des Werts nach oben / unten).

Gibt es eine Möglichkeit, iOS dazu zu bringen, standardmäßig das numerische Layout zu verwenden, aber dennoch alphanumerische Eingaben zuzulassen?

Grundsätzlich möchte ich das iOS-Verhalten für, type="number"aber ich möchte, dass sich das Feld wie ein normales Textfeld in Desktop-Browsern verhält. Ist das möglich?

AKTUALISIEREN:

Das Sniffing des User-Agent für iOS und die Verwendung des type="number"Eingabetyps ist keine Option. type="number"ist nicht für Zeichenfolgenwerte (wie Postleitzahlen) gedacht und hat andere Nebenwirkungen (wie das Entfernen führender Nullen, Komma-Trennzeichen usw.), die es für Postleitzahlen weniger als ideal machen.

Ob das funktioniert?

HTML:

<input type="tel" pattern="[0-9]*" novalidate>

Dies sollte Ihnen die schöne numerische Tastatur in Android- / iOS-Browsern bieten, die Überprüfung der Browserform in Desktop-Browsern deaktivieren, keine Pfeilspinner anzeigen, führende Nullen zulassen und Kommas und Buchstaben in Desktop-Browsern sowie auf dem iPad zulassen.

Android / iOS-Handys:

Desktop:

iPad:

Browser haben derzeit keine richtige Möglichkeit, numerische Codes wie Postleitzahlen und Kreditkartennummern darzustellen. Die beste Lösung ist die Verwendung type='tel', mit der Sie eine Zifferntastatur und die Möglichkeit haben, beliebige Zeichen auf dem Desktop hinzuzufügen.

Geben Sie textund pattern='\d*'geben Ihnen eine Zifferntastatur , sondern nur auf iOS.

Es gibt einen HTML5.1-Vorschlag für ein Attribut namens, mit inputmodedem Sie die Tastatur unabhängig vom Typ angeben können. Wird derzeit jedoch von keinem Browser unterstützt.

Ich würde auch empfehlen, einen Blick auf die Webshim- Polyfill-Bibliothek zu werfen, die eine Polyfill-Methode für diese Arten von Eingaben enthält.

Eine schnelle Google-Suche hat diese Stackoverflow-Frage gefunden .

HTML

<input type="text">

Javascript

$('input[type="text"]').on('touchstart', function() {
   $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
   $(this).attr('type', 'text');
});

Der Eingabetyp wird umgeschaltet, bevor das Formular validiert werden kann, und zeigt die richtige Tastatur an, ohne den Wert zu verfälschen. Wenn Sie möchten, dass es nur unter iOS ausgeführt wird, müssen Sie wahrscheinlich den Benutzeragenten verwenden.

Stackoverflow beim Erkennen von iOS

Dadurch wird standardmäßig die numerische Seite der ios-Tastatur angezeigt und die Möglichkeit erhalten, zur alphabetischen Seite zu wechseln. Wenn sich der HTML-Eingabetyp ändert, ändert das Gerät die Tastatur entsprechend dem entsprechenden Typ.

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'number');
        }
    })
}(jQuery));

<input type="number" id="test1" value="123" />
<input id="test2" type="checkbox" />Change

alternative Demo: http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/

Wenn Sie die große Tastatur im numerischen Format (den Telefonstil) möchten, können Sie den Code entsprechend anpassen und es funktioniert immer noch:

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'tel');
        }
    })
}(jQuery));

<input type="tel" id="test1" value="a" />
<input id="test2" type="checkbox" />Change

Ein Update für diese Frage in iOS 11. Sie können die Zifferntastatur erhalten, indem Sie einfach das Musterattribut ( pattern="[0-9]*") zu einer Eingabe mit einem Nummerntyp hinzufügen .

Das Folgende funktioniert wie erwartet.

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

Das funktioniert auch.

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

@davidelrizzo hat einen Teil der Antwort gepostet, aber die Kommentare von @Miguel Guardo und @turibe geben ein vollständigeres Bild, sind aber leicht zu übersehen.

Versuche dies:

<input type="text" name="postalcode" class="js-postal">
<script src="https://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  if('ontouchstart' in window) { // ensure we are in touch device.

    $('input.js-postal').on('focus', function() {
      var $this = $(this);

      // memorize current value because...
      var val = $this.val(); 
      // this may cause reset value.
      $this.attr('type', 'number'); 

      setTimeout(function() {
        // Asynchronously restore 'type' and value
        $this.attr('type', 'text');
        $this.val(val);
      }, 0);
    });
  }
});
</script>

Ich weiß, dass dies ein sehr hackiger Weg ist, aber das funktioniert anscheinend.
Ich habe jedoch nicht auf Android-Geräten getestet.

Beachten Sie, dass dies zu kleinen Störungen führen kann, wenn $this.attr('type', 'number')dadurch der Wert zurückgesetzt wird, wenn inputnicht numerische Zeichen vorhanden sind.

Grundlegende Ideen werden aus dieser Antwort gestohlen :)

Überprüfen Sie den Header der HTTP-Anforderung (Benutzeragent) und stellen Sie das numerische Layout für die iOS-Geräte bereit, während Sie das alphanumerische Layout für den Rest bereitstellen.