.otc {\tposition: relative;\twidth: 320px;\tmargin: 0 auto;\tfont-size: 2.65em;}.otc fieldset {\tborder: 0;\tpadding: 0;\tmargin: 0;}.otc div {\tdisplay: flex;\talign-items: center;}.otc legend {\tmargin: 0 auto 1em;\tcolor: #5555FF;}<\/code><\/pre> Global Form width and fieldset styling<\/span> <\/div> <\/div>\nJ’ai ensuite donn\u00e9 une dimension \u00e0 mon formulaire pour le centrer, et j’ai supprim\u00e9 certains styles par d\u00e9faut des champs et des l\u00e9gendes (principalement les bordures et les espaces), la mise en page flexbox permet d’anticiper le petit alignement des tirets entre les champs.<\/p>\n
input[type="number"] {\twidth: .82em;\tline-height: 1;\tmargin: .1em;\tpadding: 8px 0 4px;\tfont-size: 2.65em;\ttext-align: center;\tappearance: textfield;\t-webkit-appearance: textfield;\tborder: 2px solid #BBBBFF;\tcolor: purple;\tborder-radius: 4px;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}<\/code><\/pre> Code to style input number<\/span> <\/div> <\/div>\nCe code sert \u00e0 styliser nos entr\u00e9es de type number<\/code>, avec une petite astuce pour notre ami Chrome qui doit \u00eatre stylis\u00e9 gr\u00e2ce \u00e0 des pseudo-classes (l.15). De cette fa\u00e7on, vous devriez d\u00e9j\u00e0 avoir quelque chose de plus attrayant : nous avons dimensionn\u00e9 les champs (principalement gr\u00e2ce \u00e0 la taille de la police) et supprim\u00e9 les boutons d’incr\u00e9ment. Il ne nous reste plus qu’\u00e0 \u00ab\u00a0grouper\u00a0\u00bb les champs 3 par 3. Faisons cela, d’accord ?<\/p>\n input[type="number"]:nth-of-type(n+4) {\torder: 2;}.otc div::before {\tcontent: '';\theight: 2px;\twidth: 24px;\tmargin: 0 .25em;\torder: 1;\tbackground: #BBBBFF;}<\/code><\/pre> The little dash in between<\/span> <\/div> <\/div>\nIci j’ajoute un tiret gr\u00e2ce \u00e0 un pseudo-\u00e9l\u00e9ment ::before<\/code> et je cr\u00e9e visuellement 2 groupes. Le pseudo-\u00e9l\u00e9ment agit comme un autre enfant \u00e0 c\u00f4t\u00e9 de toutes les entr\u00e9es. Si vous ne g\u00e9rez pas l’ordre gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 order<\/code>, le tiret est \u00e0 la premi\u00e8re position. Pour le faire appara\u00eetre \u00e0 la quatri\u00e8me place, j’ai d\u00fb dire aux 3 derniers champs d’\u00eatre \u00e0 la deuxi\u00e8me place (order: 2<\/code>), le tiret \u00e0 la premi\u00e8re (order: 1<\/code>) et les autres sont par d\u00e9faut \u00e0 la place z\u00e9ro (order: 0<\/code>). Ouais, les d\u00e9veloppeurs vous savez\u2026 le 0 est le premier dans cette suite logique \ud83d\ude1c<\/p>\nEt voil\u00e0 !<\/p>\n
Mettons du JavaScript pour am\u00e9liorer l’exp\u00e9rience de l’utilisateur<\/h2>\n
En divisant un champs en 6 champs, nous avons voulu am\u00e9liorer l’assistance en guidant l’utilisateur pour qu’il comprenne plus rapidement le format attendu. Une information plus facile \u00e0 scanner. Mais pour l’instant, le formulaire n’est pas du tout utilisable, nous l’avons rendu pire que mieux si on en reste l\u00e0.<\/p>\n
Nous devons couvrir plusieurs choses ici :<\/p>\n
\n- Lorsque je remplis un champ, je passe au suivant,<\/li>\n
- Lorsque je supprime un contenu (backspace), je passe au champ pr\u00e9c\u00e9dent,<\/li>\n
- Lorsque je clique sur un champ vide, si le champ pr\u00e9c\u00e9dent est vide, je me place dessus,<\/li>\n
- Lorsque je copie\/colle un code dans le premier champ, je dois couper le code et remplir les autres entr\u00e9es.<\/li>\n<\/ul>\n
Le code JavaScript propos\u00e9 ci-dessous a un peu \u00e9volu\u00e9 si vous le comparez au CodePen. Celui de CodePen est plus avanc\u00e9 et \u00e9galement comment\u00e9. Je mettrai \u00e0 jour l’article prochainement.<\/p>\n
Allons-y ! Je vous montre le code et vous l’explique juste apr\u00e8s.<\/p>\n
let in1 = document.getElementById('otc-1'), ins = document.querySelectorAll('input[type="number"]');ins.forEach(function(input) {\t\/**\t * Control on keyup to catch what the user intent to do.\t * I could have check for numeric key only here, but I didn't.\t *\/\tinput.addEventListener('keyup', function(e){\t\t\/\/ Break if Shift, Tab, CMD, Option, Control.\t\tif (e.keyCode === 16 || e.keyCode == 9 || e.keyCode == 224 || e.keyCode == 18 || e.keyCode == 17) {\t\t\t return;\t\t}\t\t\t\t\/\/ On Backspace or left arrow, go to the previous field.\t\tif ( (e.keyCode === 8 || e.keyCode === 37) && this.previousElementSibling && this.previousElementSibling.tagName === "INPUT" ) {\t\t\tthis.previousElementSibling.select();\t\t} else if (e.keyCode !== 8 && this.nextElementSibling) {\t\t\tthis.nextElementSibling.select();\t\t}\t});\t\t\/**\t * Better control on Focus\t * - don't allow focus on other field if the first one is empty\t * - don't allow focus on field if the previous one if empty (debatable)\t * - get the focus on the first empty field\t *\/\tinput.addEventListener('focus', function(e) {\t\t\/\/ If the focus element is the first one, do nothing\t\tif ( this === in1 ) return;\t\t\t\t\/\/ If value of input 1 is empty, focus it.\t\tif ( in1.value == '' ) {\t\t\tin1.focus();\t\t}\t\t\t\t\/\/ If value of a previous input is empty, focus it.\t\t\/\/ To remove if you don't wanna force user respecting the fields order.\t\tif ( this.previousElementSibling.value == '' ) {\t\t\tthis.previousElementSibling.focus();\t\t}\t});});\/** * Handle copy\/paste of a big number. * It catches the value pasted on the first field and spread it into the inputs. *\/in1.addEventListener('input', function(e) {\tlet data = e.data || this.value; \/\/ Chrome doesn't get the e.data, it's always empty, fallback to value then.\tif ( ! data ) return; \/\/ Shouldn't happen, just in case.\tif ( data.length === 1 ) return; \/\/ Here is a normal behavior, not a paste action.\t\tfor (i = 0; i < data.length; i++ ) {\t\tins[i].value = data[i];\t}});<\/code><\/pre> The JavaScript to make this form smart<\/span> <\/div> <\/div>\nDe la ligne 11 \u00e0 13, je ne fais plus rien avec les touches Shift, Tab, CMD, Option, Control pour \u00e9viter les probl\u00e8mes. De la ligne 16 \u00e0 20, je g\u00e8re les fonctions Pr\u00e9c\u00e9dent\/Suivant. De 29 \u00e0 43, je m’occupe du focus sur les champs. L’id\u00e9e ici est que si je tape\/clique sur un champ autre que le premier, je force le focus sur le premier champ. C’est surtout pour les utilisateurs de smartphones. Mais pour \u00eatre plus intelligent, si certains champs sont d\u00e9j\u00e0 remplis, nous mettons le focus sur le premier champ vide.<\/p>\n
Les derni\u00e8res lignes de JavaScript sont l\u00e0 pour g\u00e9rer un copier\/coller, ou l’autosuggestion du clavier d’un smartphone. Dans ce cas, tout le contenu du code est plac\u00e9 dans ce premier champ. Nous prenons la valeur de ce champ et la divisons pour distribuer les valeurs dans les champs suivants.<\/p>\n
Code Unique : \u00e0 retenir<\/h2>\n
Ok, nous l’avons fait. Mais n’oubliez pas que c’est un pattern issu d’un de mes besoins, elle n’est peut-\u00eatre pas parfaite, mais pour mon cas d’utilisation, elle est suffisante. Quelques petites choses \u00e0 rappeler et \u00e0 emporter avec vous.<\/p>\n
\n- Utilisez
autocomplete=\"one-time-code\"<\/code> pour d\u00e9clencher l’autosuggestion de votre smartphone.<\/li>\n- Utilisez une combinaison de
pattern=\"[0-9]*\"<\/code> et inputtype=\"numeric\"<\/code> pour d\u00e9clencher le clavier num\u00e9rique de votre smartphone.<\/li>\n- Lorsque vous cr\u00e9ez des formulaires complexes, essayez de dimensionner\/styliser le champ en fonction des donn\u00e9es attendues.<\/li>\n
- N’oubliez pas de tester vos formulaires en y naviguant avec le clavier uniquement, et avec un lecteur d’\u00e9cran.<\/li>\n<\/ul>\n
Merci pour votre lecture. Je suis ouvert aux suggestions les commentaires<\/strong> ou sur Twitter<\/a>.
\nMerci \u00e0 Laurent<\/a> pour les tests sur iOS.<\/p>\n","protected":false},"excerpt":{"rendered":"Les exp\u00e9riences les plus douloureuses sur le mobile sont tr\u00e8s certainement celles sur les formulaires en ligne qu’il faut remplir ici et l\u00e0. Et si vous optimisiez ces exp\u00e9riences \u00e9tape par \u00e9tape ? Aujourd’hui, je vous propose une solution pour la saisie d’un code unique temporaire : Vous recevez le SMS avec un code, votre […]<\/p>\n","protected":false},"author":4,"featured_media":7479,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[875,610,9],"tags":[432,221,410,578],"coauthors":[597],"class_list":["post-7481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","category-javascript","category-tutoriels","tag-formulaire","tag-ios","tag-smartphone","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=7481"}],"version-history":[{"count":2,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7481\/revisions"}],"predecessor-version":[{"id":7487,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7481\/revisions\/7487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7479"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=7481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=7481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=7481"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=7481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Keyboard](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/06\/one-time-code-6-digits-numeric-sms-autocomplete-keyboard-suggestion.jpg\")
![\"The](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/06\/one-time-code-6-digits-numeric-sms-autocomplete-keyboard-suggestion-filled.jpg\")
<\/p>\n