82 votes

Les champs de saisie HTML n'obtiennent pas le focus lorsqu'on clique dessus

J'ai un problème et je n'arrive pas à trouver la cause exacte de ce comportement. Je ne peux pas accéder à mes champs de saisie et textarea sur mon formulaire HTML.

Malheureusement, les fichiers JS, HTML et CSS sont très volumineux, et je ne peux donc pas vraiment tout afficher ici.

Quelqu'un peut-il me dire ce qu'il faut rechercher pour déboguer ce comportement étrange ?

UPDATE

Si je déplace le curseur sur le input Je peux voir le curseur de texte, mais lorsque je clique dessus, le champ ne reçoit pas le focus. Je peux accéder au champ en appuyant sur la touche Tab et si je fais un clic droit dessus, puis un clic sur le champ, j'obtiens également la mise au point pour celui-ci.

...et non, ils n'ont pas la disabled ou readonly attributs ;-)

55voto

Andy E Points 132925

lorsque je clique dessus, le champ ne reçoit pas le focus. je peux accéder au champ en appuyant sur la touche "tabulation".

Il semble que vous ayez annulé l'action par défaut de l'option mousedown événement. Cherchez dans votre HTML et JS onmousedown et cherchez une ligne qui dit.

return false;

Cette ligne peut vous empêcher de vous concentrer en cliquant.


Concernant votre commentaire, je suppose que vous ne pouvez pas modifier le code qui ajoute ce gestionnaire ? Si c'est le cas, la solution la plus simple consiste à supprimer l'élément return false; déclaration.

Y a-t-il un moyen d'ajouter une fonctionnalité au déclencheur d'événement sans l'écraser ?

Cela dépend de la façon dont le gestionnaire est attaché. S'il est attaché à l'aide de la méthode d'enregistrement traditionnelle, par ex. élément.onmousedown vous pourriez alors créer une enveloppe pour cette dernière :

var oldFunc = element.onmousedown;
element.onmousedown = function (evt) {
    oldFunc.call(this, evt || window.event);
}

Puisque ce "wrapper" ne retourne pas faux il n'annulera pas l'action par défaut (mise au point) de l'élément. Si votre événement est attaché à l'aide d'une méthode d'inscription avancée, telle que addEventListener ou attachEvent il suffirait alors de supprimer le gestionnaire d'événement en utilisant le nom/la référence de la fonction et de le rattacher à l'aide d'une fonction enveloppée similaire à celle décrite ci-dessus. Si c'est une fonction anonyme qui a été ajoutée et que vous ne pouvez pas obtenir une référence à celle-ci, la seule solution serait d'attacher un autre gestionnaire d'événement et de mettre au point l'élément manuellement à l'aide de la fonction élément.focus() méthode.

29voto

Armin Points 3308

J'ai eu ce problème aussi. J'ai utilisé le disableSelection() de jQuery UI sur un DIV parent qui contient mes champs de saisie. Dans Chrome, les champs de saisie n'ont pas été affectés, mais dans Firefox, les champs de saisie (ainsi que les zones de texte) n'ont pas été focalisés lors du clic. Ce qui est étrange ici, c'est que l'événement de clic sur ces entrées a fonctionné.

La solution consistait à supprimer le disableSelection() pour le DIV parent.

25voto

Ashwin G Points 112

Utilisez le onclick="this.select()" pour la balise d'entrée.

24voto

bill snider Points 111

Je sais que c'est un très vieux fil de discussion, mais cela m'est arrivé récemment ; il m'a fallu un certain temps pour le comprendre.

Ce même problème peut être causé par l'insertion d'éléments "input" dans une paire de balises "label".

Dans mon cas, j'avais l'intention de créer une paire de balises 'div', mais à la place j'ai accidentellement créé une paire de balises 'label', puis j'ai inséré des champs de saisie de texte 'input type="text" ' en utilisant DOM.

Il s'affiche normalement à l'écran, mais lorsque je clique sur l'un des champs de texte, le curseur revient sans cesse à la première "entrée" et se comporte de manière vraiment erratique.

J'ai mis du temps à comprendre car ce comportement est subtil et ne correspond pas du tout à ce que j'aurais pu attendre de ce genre d'erreur.

bsnider

13voto

Bertrand Marron Points 9284

J'ai été confronté au même problème il y a quelque temps. J'utilisais le plugin jquery.layout dans une boîte de dialogue modale jquery-ui et je ne pouvais accéder à aucun des champs qu'elle contenait.

Il semble que ce soit un z-index problème (certains div était au-dessus de mes champs de saisie, je ne pouvais donc pas les cliquer). Vous devriez vérifier et essayer de changer le z-index la valeur de vos champs de saisie.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X