web-dev-qa-db-fra.com

Un événement de clic sur un bouton se déclenche lorsque vous appuyez sur la touche Entrée de manière différente (pas de formulaire)

Cette logique se déclenche lorsque vous appuyez sur "Entrée" dans l'entrée "Quantité", et je ne crois pas que ce soit le cas (cela ne se produit pas dans Chrome). Comment puis-je empêcher cela et si ce n'est pas le cas dans IE, gérez-le afin que la logique de l'événement click 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)
jqueryinternet-explorer
109
contactmatt

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

313
pallati

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

Vous devez remplacer le comportement par défaut d'IE avec preventDefault (). Dans votre sélecteur jQuery, insérez le div qui contient les zones de texte pour lesquelles vous souhaitez ignorer la touche Entrée - dans votre cas, le div "page". Au lieu de sélectionner l'intégralité de la div, 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
    }
});
31
Christian Clinton

J'avais ce problème avec ASP.NET WebForms:

<asp:Button />

Cela ne peut PAS être résolu en ajoutant simplement type = "button", car ASP.NET le remplace par type = "submit" (vous pouvez voir ce comportement dans le navigateur si vous inspectez l'élément.)

La bonne façon de faire cela dans asp.net est d’ajouter

<asp:Button UseSubmitBehavior="false" />

au bouton. ASP ajoutera automatiquement l'attribut type = "button".

4
Guilherme

IE pense que tout élément button est un bouton submit (que vous ayez un form ou non). Il gère également la pression de la touche Enter dans un élément de formulaire en tant que soumission de formulaire implicite. Donc, comme il pense que vous essayez de soumettre votre formulaire, il pense que cela vous aidera et déclenchera l'événement click sur (ce qu'il pense être) le bouton submit.

Vous pouvez attacher un événement keyup à input ou à button et rechercher la clé Enter (e.which === 13) et return false;

2
Heretic Monkey

Une solution basée sur jQuery qui effectue cela pour chaque bouton est:

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

Cependant, l'événement click continuera à apparaître dans les éléments parents pour une raison quelconque ...

1
lschult2