Bonjour,
Dans un formulaire d'inscription et de paiement, j'ai mis trois champs pour le numéro de téléphone. Au Québec, les numéros de téléphone sont composés de trois parties :
- Code régional (3 chiffres)
- Préfixe (3 chiffres)
- Numéro (4 chiffres)
Le résultat ressemblerait à ceci : 819-123-4567.
J'ai décidé de créer trois inputs pour m'assurer que le client comprenne bien qu'il doit entrer les trois parties de son numéro de téléphone. Ca lui évite aussi de tapper les tirets. Pour agrémenter le tout, sur le onkeyup de chaque input, je vérifie si la longueur maximum du champ est atteinte. Si oui, je passe au champ suivant. Cela permet donc de tapper 8191234567 et grâce au javascript, dans cet exemple, lorsque le 9 est tappé, le focus est automatiquement donné au champ suivant. Vous me suivez toujours ?
HTML
Javascript
Vous comprenez le principe ?
Mon application se veut accessible. Je trouvais donc que cette fonctionnalité rendait l'entrer du numéro de téléphone beaucoup plus efficace pour l'administrateur qui devra l'entrer très souvent. J'étais ravi d'avoir écrit ce code qui fonctionnait à merveille, jusqu'au jour où j'ai tenté d'utiliser Shift+Tab pour revenir en arrière dans un input déjà plein. Dans un tel cas, le focus est automatiquement redonné au champ suivant. Il est presque impossible d'aller modifier un numéro de téléphone sans la souris. On s'entend donc pour dire que niveau accessibilité, c'est pas la joie.
J'ai pensé détecter si la touche pressée était numérique et si c'était le cas, d'appeler ma fonction AllerSuivant. Autrement, si c'est la touche TAB ou autres choses, de rester dans le champ. Vous en pensez quoi ? Est-ce une bonne idée ou devrais-je complètement retirer ce script ?
Dans un formulaire d'inscription et de paiement, j'ai mis trois champs pour le numéro de téléphone. Au Québec, les numéros de téléphone sont composés de trois parties :
- Code régional (3 chiffres)
- Préfixe (3 chiffres)
- Numéro (4 chiffres)
Le résultat ressemblerait à ceci : 819-123-4567.
J'ai décidé de créer trois inputs pour m'assurer que le client comprenne bien qu'il doit entrer les trois parties de son numéro de téléphone. Ca lui évite aussi de tapper les tirets. Pour agrémenter le tout, sur le onkeyup de chaque input, je vérifie si la longueur maximum du champ est atteinte. Si oui, je passe au champ suivant. Cela permet donc de tapper 8191234567 et grâce au javascript, dans cet exemple, lorsque le 9 est tappé, le focus est automatiquement donné au champ suivant. Vous me suivez toujours ?
HTML
<input name="TelephoneJourCodeRegional" type="text" id="TelephoneJourCodeRegional" value="" size="3" maxlength="3" onkeyup="AllerSuivant(this.id,'TelephoneJourPrefixe')" />
Javascript
function AllerSuivant(IDCourant,IDSuivant)
{
if ( document.getElementById(IDCourant).value.length == document.getElementById(IDCourant).maxLength)
document.getElementById(IDSuivant).focus();
}
Vous comprenez le principe ?
Mon application se veut accessible. Je trouvais donc que cette fonctionnalité rendait l'entrer du numéro de téléphone beaucoup plus efficace pour l'administrateur qui devra l'entrer très souvent. J'étais ravi d'avoir écrit ce code qui fonctionnait à merveille, jusqu'au jour où j'ai tenté d'utiliser Shift+Tab pour revenir en arrière dans un input déjà plein. Dans un tel cas, le focus est automatiquement redonné au champ suivant. Il est presque impossible d'aller modifier un numéro de téléphone sans la souris. On s'entend donc pour dire que niveau accessibilité, c'est pas la joie.
J'ai pensé détecter si la touche pressée était numérique et si c'était le cas, d'appeler ma fonction AllerSuivant. Autrement, si c'est la touche TAB ou autres choses, de rester dans le champ. Vous en pensez quoi ? Est-ce une bonne idée ou devrais-je complètement retirer ce script ?
Je pense que le test du pavé numérique est une bonne idée, car dans la pratique, ce script est très utile et fait gagner énormément de temps à l'utilisateur. J'avais pensé faire la même chose pour le téléphone français mais je n'avais pas penser à ce point.