iPhone / iOS: présentation du clavier HTML 5 pour les codes postaux
Il existe plusieurs astuces pour afficher différents claviers sur les appareils mobiles pour les entrées HTML 5 (c.-à-d. <input> Mots clés).
Par exemple, certains sont documentés sur le site Web d’Apple, Configuration du clavier pour les vues Web .
Celles-ci sont excellentes pour la convivialité, mais s’il s’agit d’une saisie pour les codes postaux internationaux (principalement numériques, mais les lettres autorisées), il ne nous reste que peu de choix. La plupart des gens recommandent d'utiliser le pattern="\d*" astuce pour afficher le clavier numérique, mais cela ne permet pas la saisie de lettres.
Le type="number" type d’entrée affiche le clavier normal mais a été déplacé vers la disposition numérique:
Cela fonctionne bien pour les appareils iOS, mais cela fait penser à Chrome que l'entrée doit être un nombre et même changer le comportement de l'entrée (incrémenter/diminuer la valeur).
Existe-t-il un moyen de forcer iOS à adopter la présentation numérique par défaut tout en permettant une entrée alphanumérique?
En gros, je veux le comportement iOS pour type="number" mais je veux que le champ se comporte comme un champ de texte normal sur les navigateurs de bureau. Est-ce possible?
UPDATE:
Renifler l'agent utilisateur pour iOS et utiliser le type="number" le type d’entrée n’est pas une option. type="number" n'est pas destiné aux valeurs de chaîne (comme les codes postaux), et il a d'autres effets secondaires (tels que la suppression des zéros, des séparateurs de virgule, etc.) qui le rendent moins qu'idéal 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 de Nice sur les navigateurs de téléphone Android/iOS, désactiver la validation de formulaire de navigateur sur les navigateurs de bureau, ne pas afficher de flèches de flèche, autoriser les zéros non significatifs, et autoriser les virgules et les lettres sur les navigateurs de bureau, ainsi que sur iPad.
Téléphones Android/iOS:
Bureau:
iPad:
Les navigateurs n’ont actuellement aucun moyen approprié de représenter des codes numériques tels que les codes postaux et les numéros de cartes de crédit. La meilleure solution consiste à utiliser type='tel' qui vous donnera un clavier numérique et la possibilité d'ajouter n'importe quel caractère sur le bureau.
Tapez text et pattern='/d' vous donnera un clavier numérique, mais seulement sur iOS.
Il existe une proposition HTML5.1 pour un attribut appelé inputmode qui vous permettrait de spécifier un clavier, quel que soit son type. Cependant, not n'est actuellement pris en charge par aucun navigateur.
Je recommanderais également de jeter un coup d'oeil à la bibliothèque Webshim polyfill qui a une méthode méthode polyfill pour ces types d'entrées.
Une recherche rapide sur Google a trouvé cette question Stackoverflow .
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 le formulaire puisse être validé, affichant le clavier correct sans perturber la valeur. Si vous souhaitez uniquement le faire fonctionner sur iOS, vous devrez probablement utiliser l'agent utilisateur.
Cela fera apparaître par défaut le côté numérique du clavier ios et permettra de basculer du côté alphabétique. Lorsque le type d'entrée html change, le périphérique modifie le clavier pour qu'il corresponde 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
autre démo: http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/
Si vous voulez un clavier de grand format numérique (style téléphone), vous pouvez ajuster le code en conséquence et cela 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
Une mise à jour de cette question sous iOS 11. Vous pouvez obtenir le clavier numérique en ajoutant simplement l'attribut pattern (pattern="[0-9]*") à toute entrée avec un type de numéro.
Ce qui suit fonctionne comme prévu.
<input type="number" pattern="[0-9]*">
Cela fonctionne 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.
Essaye ça:
<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 très bizarre, mais cela fonctionne apparemment.
Je n'ai pas encore testé sur Android).
Notez que ceci peut causer quelques petits problèmes notables lorsque $this.attr('type', 'number') car il réinitialise la valeur lorsque input contient des caractères non numériques.
Les idées de base sont volées à cette réponse :)