11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Focus

Bonjour
J'ai un formulaire avec de nombreux champs <input type="text"> à saisir.
J'ai mis un "onchange" sur ces champs pour tester la validité de la saisie.
Le plus souvent l'utilisateur passe au champ suivant avec une tabulation, et c'est à ce moment là que la fonction de test est appelée.
Le code:

if(checkItem(name, value)) {     /* vérifier que la valeur est valide */
    setClass(element, 'invalid');  /*  ajouter la class "invalid" aux classes de l'élément */
    element.focus();  /* mettre le focus sur cet élément */
    return false;
}

Le changement de classe a ben lieu, mais le curseur reste dans le champ suivant, tout se passe comme si element.focus(); n'avait aucun effet.
Auriez vous une idée de la raison de ce comportement?

Merci pour votre aide
Modifié par PapyJP (20 Dec 2016 - 12:48)
Bonjour.

Je pense que cela manque de code pour donner son avis...

Un truc m'interpelle : pourquoi mettre une classe invalid à l'élément si la valeur est valide ?

Smiley smile
Modérateur
C'est à cause de la pile des évènements,
Le code va éxécuter les évènements dans l'ordre:
change > blur > focus

Comme tu peux le constater sur l'exemple suivant: http://codepen.io/anon/pen/yVwere

On pourrait imaginer un contournement à partir de setTimeout, mais c'est vraiment de la moche bricole.
Il faudrait déployer un système plus complexe sinon.

De manière générale c'est une très mauvaise idée que forcer le focus sur un champ lorsqu'il est invalide. Si le champ doit absolument être valide pour la suite, il vaut mieux faire un formulaire par étapes.
(comportement inattendu et désagréable, problèmes d'accessibilité, etc. )
Zelena a écrit :

Un truc m'interpelle : pourquoi mettre une classe invalid à l'élément si la valeur est valide ?
Smiley smile

Mauvaise copie du code: c'est bien entendu 
if(! this.checkItem(name, value))


kustolovic a écrit :
C'est à cause de la pile des évènements,
Le code va éxécuter les évènements dans l'ordre:
change > blur >focus

Merci, c'est le genre de chose que je craignais.
Je vais laisser l'utilisateur décider de revenir sur le champ s'il le préfère. De toute façon le formulaire sera testé au moment de l'envoi et il ne sera pas envoyé au programme PHP tant qu'il restera un champ invalide.
Sujet clos
Aller à