117 votes

L'événement Click du bouton se déclenche lorsque l'on appuie sur la touche Enter dans une entrée différente (sans formulaire).

Cette logique se déclenche lorsque vous appuyez sur la touche "Entrée" dans l'entrée "Montant", et je ne pense pas qu'elle le devrait (elle ne le fait pas dans Chrome). Comment puis-je empêcher cela et, si je ne peux pas l'empêcher dans IE, le gérer de manière à ce que la logique de l'événement de clic ne se déclenche pas ?

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

script

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Jquery : 1.7.2
  • IE 9
  • (Fonctionne dans Chrome)

343voto

pallati Points 1071

J'ai eu le même problème et l'ai résolu en ajoutant type="button" de l'attribut <button> par lequel IE considère le bouton comme un simple bouton au lieu d'un bouton d'envoi (qui est le comportement par défaut d'un élément <button> élément).

34voto

Christian Clinton Points 109

J'ai rencontré ce problème aujourd'hui. IE part du principe que si vous appuyez sur la touche Entrée dans l'un des champs de texte, vous voulez soumettre le formulaire - même si les champs ne font pas partie d'un formulaire et même si le bouton n'est pas de type "submit".

Vous devez remplacer le comportement par défaut d'IE par preventDefault(). Dans votre sélecteur jQuery, mettez la div qui contient les zones de texte dont vous voulez ignorer la touche d'entrée -- dans votre cas, la div "page". Au lieu de sélectionner l'ensemble de la division, vous pouvez également spécifier les zones de texte que vous souhaitez ignorer spécifiquement.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});

3voto

Mike McCaughan Points 2087

IE pense que tout button est un élément soumettre (que vous ayez un form ou pas). Il gère également la presse de la Enter dans un élément de formulaire comme une soumission de formulaire implicite. Donc, puisqu'il pense que vous essayez de soumettre votre formulaire, il se dit qu'il va vous aider et déclenche la fonction click sur (ce qu'il pense être) le soumettre bouton.

Vous pouvez joindre un keyup à l'un ou l'autre des éléments suivants input ou le button et vérifiez le Enter clé ( e.which === 13 ) et return false;

1voto

lschult2 Points 238

Il existe une solution basée sur jQuery qui fait cela pour chaque bouton :

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

Cependant, pour une raison quelconque, l'événement de clic continue de s'étendre aux éléments parents...

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