iPhone/ iOS: présentation du clavier HTML 5 pour les Codes postaux

est-ce que ça va marcher?

HTML:

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

cela devrait vous donner le clavier numérique agréable sur Android/iOS navigateurs téléphoniques, désactiver la validation de formulaire de navigateur sur les navigateurs de bureau, ne pas montrer de tourneurs de flèche, permet zéros de tête, et permet des virgules et des lettres sur les navigateurs de bureau, ainsi que sur iPad.

Android / iOS phones:

bureau:

iPad:

Une rapide recherche sur google trouvé ce Stackoverflow question .

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');
});

le type d'entrée est commuté avant que la forme puisse être validée, montrant le clavier correct sans gâcher la valeur. Si vous voulez seulement qu'il tourne sur iOS, vous devrez probablement utiliser l'agent utilisateur.

Stackoverflow sur la détection iOS

n'ont actuellement aucune façon appropriée de représenter les codes numériques comme les codes postaux et les numéros de carte de crédit. La meilleure solution est d'utiliser des type='tel' qui vous donnera un pavé numérique et la possibilité d'ajouter n'importe quel personnage de bureau.

Type text et pattern='/d' vous donnera un pavé numérique, mais uniquement sur iOS.

il y a un HTML5.1 proposition d'un attribut appelé inputmode qui vous permettrait pour spécifier le clavier quel que soit le type. Toutefois pas n'est actuellement pris en charge par aucun navigateur.

je recommande également d'avoir un regard sur le Webshim bibliothèque polyfill qui a un méthode polyfill pour ces types d'entrées.

cela fera le côté numérique de l'écran du clavier ios par défaut et maintient la possibilité de passer au côté alphabétique. Lorsque le type d'entrée html change, l'appareil change le clavier pour correspondre au type approprié.

(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

Démo alternative: http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result /

si vous voulez le clavier grand format numérique (le style de téléphone) vous pouvez ajuster le code en conséquence et il fonctionne toujours:

(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

mise à jour de cette question dans iOS 11. Vous pouvez obtenir le clavier numérique en ajoutant simplement l'attribut pattern ( pattern="[0-9]*" ) à n'importe quelle entrée avec un type de nombre.

les travaux suivants comme prévu.

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

ça marche aussi.

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

@davidelrizzo a posté une partie de la réponse, mais les commentaires de @Miguel Guardo et @turibe donnent une image plus complète mais sont faciles à manquer.

essayez ceci:

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

je sais que c'est une façon très macabre, mais apparemment ça marche.

Je n'ai pas testé les appareils Android.

Note Ceci peut causer un petit problème quand $this.attr('type', 'number') parce que cela réinitialise la valeur quand input a des caractères non numériques.

idées de Base sont volés de la cette réponse :)

pourquoi ne pas vérifier l'en-tête de la requête HTTP (user agent), et servir la disposition numérique aux périphériques iOS, tout en servant la disposition alphanumérique au reste?