onkeypress dans Internet Explorer appelle toutes les fonctions liées à la pression sur une page Web

Question

J'ai deux zone de texte et deux boutons sur une page Web. Chaque zone de texte possède sa propre fonction de touche qui vérifie la touche de retour et appelle une fonction javascript particulière.

Mais le problème est que si je commence à taper sur n'importe quelle zone de texte et que j'appuie sur return, les deux fonctions sont appelées. Cela se produit uniquement dans Internet Explorer.

OnKeyPress est appelé comme un attribut de la balise d'entrée

onkeypress="if(event.keyCode==13) submitEmail();" 

et

onkeypress="if(event.keyCode==13) login();" 

Merci

Answer 1

Ceci est dû à l'événement bouillonnant. Lorsqu'un événement se produit sur un élément, il arrive également sur tous les éléments qui le contiennent, en suivant la progression de l'arborescence DOM. Si vous appuyez sur Retour dans la zone de saisie, vous appuyez également sur la touche retour dans la fenêtre.

Si vous ajoutez return false; à l'attribut onkeypress de l'élément input, cela empêchera le bouillonnement.

<input ... onkeypress="if(event.keyCode==13) { submitEmail();return false; }"> 

Answer 2

Vous pouvez essayer de les définir dans votre balise de script ou votre fichier js externe, en ciblant chaque entrée avant de définir la fonction de la touche.

<input type="text" id="email"> 
<input type="text" id="login"> 

<script> 
var emailBox = document.getElementById("email") 
emailBox.onkeypress = function(e){ 
    if(e.keyCode == 13) submitEmail(); 
} 

var loginBox = document.getElementById("login") 
loginBox.onkeypress = function(e){ 
    if(e.keyCode == 13) login(); 
} 
</script>