web-dev-qa-db-fra.com

Champ de saisie du code postal canadien

Les codes postaux canadiens sont formés de 3 lettres et de 3 chiffres interposés. Exemple: M1K 3H7

Le code postal canadien est assez délicat pour un utilisateur d'entrer dans un champ de formulaire de saisie, en particulier sur les appareils mobiles où l'utilisateur doit basculer entre les claviers (clavier alphabétique à numérique). Il a besoin de basculer 5 ou 6 fois entre les dispositions de clavier!

enter image description here

Séparer le terrain en deux pourrait compliquer encore plus l'expérience. Avez-vous des suggestions sur la façon de faciliter l'expérience?

8

Utilisez simplement un champ de texte standard. La saisie d'un code postal n'est pas aussi difficile qu'il y paraît.

Vous pouvez utiliser regex pour la séparation des espaces et la commutation automatique des chiffres et des caractères. c'est-à-dire forcer le clavier mobile à basculer entre les chiffres et les caractères lors de la saisie du code postal, car vous savez de quel modèle il s'agit. La suggestion automatique serait la meilleure option ici.

Le code postal canadien est similaire et moins complexe que le code postal britannique . Les séparations de codes postaux au Royaume-Uni peuvent être 4-3 ou 3-3 ou 4-3, ... il existe plusieurs variantes.

Ce sont tous les modèles que nous avons au Royaume-Uni

  A9 9AA
 A9A 9AA
 A99 9AA
 AA9 9AA
AA9A 9AA
AA99 9AA

Plusieurs sites, y compris le Postoffice of UK utilisent le modèle de champ de texte standard pour UX (sur les sites Web et les formulaires numériques) et fournissent séparation physique formulaires papier et PDF (voir page 26 )

enter image description hereenter image description here

6
Rayraegah

Vous pouvez peut-être essayer d'implémenter quelque chose de similaire à Google Maps, où l'utilisateur commence à peine à taper son adresse, voit les adresses possibles parmi lesquelles choisir et peut choisir l'une d'entre elles qui est l'adresse qu'il recherche, sans avoir à le faire tapez l'adresse complète.

Google Maps address searching example

Pour les adresses américaines que j'ai utilisées sur Google Maps, je n'ai jamais eu à saisir le code postal pour sélectionner l'adresse que je recherchais (et les codes postaux américains ne sont que 5 chiffres).

1
pkr298

Pourquoi ne pas éviter que l'utilisateur spécifie le code postal? Demandez à l'application de la rechercher en fonction de l'adresse.

0
Bill Dagg

Une façon de le faire pourrait être de glaner le code postal en utilisant l'adresse et l'API CanadaPost https://www.canadapost.ca/pca/support/webservices

Si vous voulez absolument que votre utilisateur saisisse manuellement, vous pouvez utiliser 6 champs distincts, avec le type alternant entre le texte et le nombre (cela basculerait le clavier approprié). Les champs peuvent être stylisés pour apparaître comme un seul champ. Je suggère fortement de tester cela avec les utilisateurs d'abord!

0
MediaFormat