Le bug d'IE déclenche le clic pour 2 boutons ?

Question

J'essaie de déclencher le bouton d'envoi quand un utilisateur appuie sur enter . Cela fonctionne parfaitement avec tous les navigateurs, sauf Internet Explorer 9. Ce qui est étrange, c'est qu'IE insiste pour déclencher également le clic d'un autre bouton que je ne lui ai jamais demandé. Est-ce que je fais quelque chose de mal ou comment résoudre ce problème ?

Voici mon code. L'appui sur la touche Entrée dans IE déclenche le clic d'envoi comme prévu, mais pour une raison quelconque, il déclenche également le clic d'un bouton quelconque (même sans mon écouteur de touches) :

$('input[type=submit]').click(function () {
    alert('Submit click');
});

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13) $('input[type=submit]').click();
});

//ROUTE CLEAR HANDLER
$('button').click(function () {
    alert('Button click');
});

Vous pouvez voir le bug en action ici : http://jsfiddle.net/h64xD/

Answer 1

Voici quelques éléments à prendre en compte :

IE9 compte les <button/> en tant qu'élément type="submit" par défaut. Donc pour le rendre non soumis, vous devez être explicite :

<button type="button">Some button</button>

Si vous faites cela, vous remarquerez que l'émulé click ne déclenche plus l'événement <button/> mais déclenche toujours 2 événements. La raison en est que, parce que vous n'avez pas explicitement défini une fonction <form/> IE9 suppose que les contrôles se trouvent dans un formulaire et qu'il faut donc appuyer sur le bouton enter dans la zone de texte déclenche 2 événements :

• celui que vous imitez
• le comportement par défaut du bouton d'envoi du formulaire

Donc, pour contourner ce problème, il faut être explicite :

<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />

Ce sont les raisons pour lesquelles vous observez ce comportement dans IE. @MrSlayer La réponse de l'entreprise répond à la deuxième question, à savoir l'arrêt de l'activité de l'entreprise. keypress une fois que vous l'avez traité de manière satisfaisante, en utilisant la fonction preventDefault()

Answer 2

La touche Entrée a un comportement par défaut de soumission, vous devez donc empêcher l'exécution du comportement par défaut. Comme la touche button est, par défaut, type="submit" il exécute ce bouton lorsque la touche Entrée est enfoncée.

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13)
    {
        event.preventDefault();
        $('input[type=submit]').click();
    }
});

Answer 3

Que diriez-vous de déclencher l'envoi du formulaire au lieu d'un clic sur un bouton ?

$('input[type=text]').keypress(function(e) {
     var keycode = event.keyCode || event.which,
         frm = $(this).closest('form');

     if (keycode == 13) {
          e.stopPropagation();
          frm.submit();
          return false;
     }
     return true;
});

--EDIT--

Mis à jour légèrement pour arrêter la propagation de l'événement.

Answer 4

Tout d'abord, il n'est pas nécessaire de joindre manuellement un événement pour soumettre un formulaire lorsque l'utilisateur appuie sur la touche enter - le navigateur s'en occupe déjà.

Curieusement, cela était dû à l'ordre des éléments, aux associations implicites de formulaires, ainsi qu'au fait qu'IE traite les boutons comme des éléments de soumission.

Essayez d'intervertir l'ordre de ces boutons pour voir ce que je veux dire :

<input type="text" />
<input type="submit" value="Submit" />
<button>Some button</button>

Naturellement, le navigateur a déjà reçu l'instruction d'écouter pour répondre à l'élément Enter sur une entrée de texte. Il en résulte que le navigateur en cliquant sur le bouton d'envoi associé. De plus, puisque vous n'avez pas explicitement fourni un nom de domaine de type form ou des éléments associés entre eux par l'intermédiaire de leurs form le navigateur tente d'établir cette relation pour vous.

Dans votre code, le <button> est supposé être le bouton d'envoi de l'entrée de texte (parce que c'est le premier bouton d'envoi du formulaire implicite). Ainsi, chaque fois que vous appuyez sur Enter sur l'entrée de texte, le navigateur déclenche naturellement l'événement de clic du bouton associé.

Si vous réorganisez les éléments, comme je l'ai fait ci-dessus, c'est le contraire qui se produit. IE associe l'autre <input> avec la zone de texte. Et en appuyant sur Enter sur la zone de texte déclenche implicitement l'événement de clic sur l'entrée submit.

Vous pouvez confirmer ce comportement en comparant les .form attributs de divers éléments. Par exemple, l'ajout de id Les valeurs nous permettront d'y accéder plus facilement :

<button id="fiz">Some Button</button>
<input  id="foo" type="text" />
<input  id="bar" type="submit" value="Submit" />

Puis faites quelques comparaisons rapides :

var button = document.getElementById("fiz"); 
var text = document.getElementById("foo"); 
var submit = document.getElementById("bar"); 

button.form === text.form;   // true 
submit.form === text.form;   // true 
button.form === submit.form; // true 

Au final, c'est donc à vous de lever l'ambiguïté entre les deux boutons, en déclarant l'option <button> élément à être type='button' ou en le plaçant après le bouton d'envoi prévu.