L'événement de clic de bouton se déclenche lorsque vous appuyez sur la touche Entrée dans différentes entrées (sans formulaire)

111

Cette logique se déclenche lorsque vous appuyez sur "Entrée" dans l'entrée "Montant", et je ne pense pas qu'elle le devrait (ce n'est pas le cas dans Chrome). Comment puis-je empêcher cela, et sinon l'empêcher dans IE, le gérer de sorte 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>

Scénario

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Jquery: 1.7.2
  • IE 9
  • (Fonctionne dans Chrome)
jquery internet-explorer contactmatt
la source
1
Contrairement à la question, cela m'est arrivé avec Chrome et Firefox. Même correctif (type de bouton).
Tim Grant

Réponses:

324

J'ai eu le même problème et je l'ai résolu en ajoutant un type="button"attribut à l' <button>élément, 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 <button>élément).

pallati
la source
6
J'ai eu le même problème avec Firefox. l'attribut type = "button" l'a également résolu pour moi
Alexander Fradiani
109
Puissiez-vous vivre mille ans.
TheBrain
4
Excellente solution. Je pensais que les navigateurs ne soumettraient automatiquement que sur "Entrée" à l'intérieur des balises <form>. Mais je vois que j'avais tort.
Clayton Bell
2
Des jours de cris à IE9 (entre mes hurlements généraux sur d'autres choses sur lesquelles je dois crier) et c'était la solution. Hot dang.
phatskat
5
J'ai été mordu par ce problème deux fois en seulement quelques semaines. C'est bizarre d'avoir à appeler type="button"dans un <button>élément. haha ... :) J'espère que je m'en souviendrai pour la prochaine fois.
Sam
33

J'ai rencontré ce problème aujourd'hui. IE suppose que si vous appuyez sur la touche Entrée dans 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 n'est pas de type «Soumettre».

Vous devez remplacer le comportement par défaut d'IE avec preventDefault (). Dans votre sélecteur jQuery, mettez dans le div qui contient les zones de texte que vous voulez ignorer la touche Entrée - dans votre cas, le div "page". Au lieu de sélectionner le div entier, 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
    }
});
Christian Clinton
la source
Meilleure solution lorsque vous devez utiliser des composants personnalisés et que vous ne pouvez pas ajouter type = "button".
FireZenk
Merci Clinton, cela a fonctionné pour moi. J'ai d'abord essayé de faire en sorte que tous les boutons de type "bouton" ne fonctionnent toujours pas. Ensuite, j'ai dû supprimer l'événement bouillonnant lors de la pression de la touche Entrée.
Rupesh Kumar Tiwari
Merci beaucoup. Je suis en colère contre mon ordinateur depuis 2 heures.
Edwin le
4

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" />

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

Guilherme
la source
2

IE pense que tout buttonélément est un bouton de soumission (que vous en ayez un formou non). Il gère également la pression de la Entertouche dans un élément de formulaire comme une 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' clickévénement sur (ce qu'il pense être) le bouton d' envoi .

Vous pouvez attacher un keyupévénement au inputou au buttonet vérifier la Enterclé ( e.which === 13) etreturn false;

Singe hérétique
la source
1

Une solution basée sur jQuery qui fait 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 de clic continuera de remonter jusqu'aux éléments parents pour une raison quelconque ...

lschult2
la source
0

Pour Chrome, vous pouvez ajouter <button type="submit" style="display:none"/> Parce que dans Chrome, le type de bouton par défaut est "Soumettre"

Pour IE, j'ai essayé de faire la même chose avec type="button"(dans IE, le type de bouton par défaut est "bouton") mais n'a pas bien fonctionné.

Voici donc la solution. En HTML, ajoutez (keypress)=xxx($event)dans votre formulaire. Dans TS,

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

Ce qui précède fonctionnera dans tous les scénarios tels que les navigateurs croisés, le clic normal et le flux de tabulations.

Tamoul.
la source