Pourquoi mon onchange fonction appelée deux fois lors de l'utilisation .focus()?
TLDR
- Cochez cette exemple dans google chrome.
- Type un truc et appuyez sur
tab
. voir une nouvelle boîte de dialogue apparaît - taper quelque chose et appuyez sur
enter
. voir le deux nouvelles zones apparaissent, où l'on est attendu.
Intro
J'ai remarqué que lors de l'utilisation de enter
plutôt tab
pour modifier les champs, ma fonction onchange sur un champ de saisie, tira deux fois. Cette page était plutôt grand, et toujours en développement (lire: de nombreux autres bugs), j'ai donc fait un exemple minimal qui affiche ce comportement, et dans ce cas, il n'a même sur tab. Ce n'est un problème dans Chrome aussi loin que je peux dire.
Ce qu'il doit faire
Je veux faire une nouvelle entrée une fois que quelque chose est entré dans l'entrée-champ. Ce champ doit obtenir le focus.
Exemple:
javascript qui ont besoin de jquery
function myOnChange(context,curNum){
alert('onchange start');
nextNum = curNum+1;
$(context.parentNode).append('<input type="text" onchange="return myOnChange(this,'+nextNum+')" id="prefix_'+nextNum+'" >');
$('#prefix_'+nextNum).focus();
return false;
}
HTML-partie
<div>
<input type="text" onchange="return myOnChange(this,1);" id="prefix_1">
</div>
le code complet est sur pastebin. vous devez ajouter votre chemin à jquery dans le script
Un exemple de travail est ici sur jFiddle
Le onchange est appelée deux fois: La myOnChange
fonction est appelée, fait de la nouvelle entrée, appelle la focus()
, le myOnChange
est appelée de nouveau, fait une nouvelle entrée, le "intérieure" myOnChange
sorties et puis le 'extérieur' myOnchange
sorties.
Je suppose que c'est parce que le changement de focus les feux de la onchange()
?. Je sais qu'il ya une certaine différence de comportement entre les navigateurs.
Je voudrais l'arrêter .focus() (ce qui semble être le problème) de ne PAS appeler le onchange()
, donc myOnChange()
n'est pas appelée deux fois. Quelqu'un sait comment faire?
OriginalL'auteur Nanne | 2011-03-02
Vous devez vous connecter pour publier un commentaire.
Une solution rapide (non testé) devrait être de reporter l'appel à
focus()
viajusqu'à ce que après le gestionnaire d'événement est terminé.
Cependant, il est possible de le faire fonctionner sans un hack; jQuery-gratuit exemple de code:
Note: je n'ai pas utilisé cette méthode, mais il semble que la meilleure réponse à la question. Mon problème eu plus de questions, et j'ai donc utilisé la réponse que j'ai donnée ci-dessous, mais encore marqué ce que accepté 😉
OriginalL'auteur Christoph
Il y a un moyen plus simple et plus raisonnable de solution. Comme vous vous attendez à onchange feu lorsque la valeur d'entrée change, vous pouvez simplement explicitement vérifier, si c'était réellement changé.
OriginalL'auteur jooher
Je peux confirmer
myOnChange
est appelée deux fois sur Chrome. Mais lecontext
argument est le premier champ de saisie sur les deux appels.Si vous supprimez l'alerte d'appel, il ne se déclenche qu'une fois. Si vous utilisez l'alerte à des fins de test, puis essayez à l'aide de la console à la place (même si vous avez besoin de l'enlever pour tester sous IE).EDIT: Il semble que le changement événement se déclenche deux fois sur la touche entrée. L'exemple suivant ajoute une condition à vérifier l'existence du nouveau champ.
Mise à jour:
La
$('#prefix_'+nextNum).focus();
n'est pas appelé parce que le focus est une méthode de l'objet dom, pas jQuery. Il fixe avec$('#prefix_'+nextNum)[0].focus();
.ahh oui. J'ai été la tabulation. Je reçois le double sur entrée.
J'ai ajouté un jsFiddle exemple
+1 pour obtenir de l'aide sur le problème de focus. Je vais utiliser la solution je suis venu avec, mais c'est utile 🙂
OriginalL'auteur johnhunter
Le problème est en effet qu'en raison de la
focus()
, le onchange est appelé à nouveau. Je ne sais pas si c'est une bonne solution, mais cela en ajoutant ceci à la fonction est une solution rapide:(Le onchange est convoquée à nouveau, mais est maintenant vide. C'est aussi bon parce que cette fonction ne devrait jamais être appelé deux fois. Il y aura quelques modifications de l'interface dans le produit final que de les aider avec des problèmes qui surviennent à partir de ce (erreurs et tout et tout), mais à la fin c'est quelque chose que j'aurais probablement fait de toute façon).
solution ici: http://jsfiddle.net/k4WKH/2/
@Johnhunter dit, le focus ne fonctionne pas dans l'exemple, mais il le fait dans mon code complet. Je n'ai pas regardé ce qu'il se passe là-bas, mais cela semble être un problème distinct.
OriginalL'auteur Nanne
peut-être que cela l'aide à n'importe qui, pour une raison quelconque, de chrome lorsque vous attachez un événement onchage à une entrée de texte, lorsque vous appuyez sur la enterkey, la fonction de l'événement, le faire deux fois, je résoudre ce problème chaged l'événement onkeypress et d'évaluer les codes, si j'ai une entrée, puis faire la fonction, parce que j'ai plus qu'à attendre pour un enterkey de l'utilisateur, qui fonctionne pas pour la touche de tabulation.
OriginalL'auteur saheka
Essayez cet exemple:
jsFiddle.
enter
Je suis désolé, cela ne veut en effet faire 2 nouveaux champs d'entrée 🙁
+1 pour jsFiddle. Que est serviable 🙂
OriginalL'auteur CoolEsh