Das Ereignis "Schaltfläche klicken" wird ausgelöst, wenn die Eingabetaste in einer anderen Eingabe gedrückt wird (keine Formulare).

111

Diese Logik wird ausgelöst, wenn Sie in der Eingabe "Betrag" die Eingabetaste drücken, und ich glaube nicht, dass dies der Fall sein sollte (in Chrome nicht). Wie kann ich dies verhindern und wenn nicht, verhindern Sie es im IE, damit die Logik im Klickereignis nicht ausgelöst wird.

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

Skript

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Anfrage: 1.7.2
  • IE 9
  • (Funktioniert in Chrome)
jquery internet-explorer Kontaktmatt
quelle
1
Im Gegensatz zu der Frage ist mir das gerade mit Chrome und Firefox passiert. Gleiches Update (Schaltflächentyp).
Tim Grant

Antworten:

324

Ich hatte das gleiche Problem und löste es, indem ich type="button"dem <button>Element ein Attribut hinzufügte , wodurch der IE die Schaltfläche als einfache Schaltfläche anstelle einer Senden-Schaltfläche betrachtet (was das Standardverhalten eines <button>Elements ist).

Pallati
quelle
6
Ich hatte das gleiche Problem mit Firefox. Das Attribut type = "button" hat es auch für mich gelöst
Alexander Fradiani
109
Mögest du tausend Jahre leben.
TheBrain
4
Hervorragende Lösung. Ich dachte, Browser würden sich nur bei "Enter" automatisch senden, wenn sie sich in <form> -Tags befinden. Aber ich sehe, ich habe mich geirrt.
Clayton Bell
2
Tage des Schreiens bei IE9 (zwischen meinem allgemeinen Schreien bei anderen Dingen, die ich anschreien muss) und dies war die Lösung. Heiß, Mist.
Phatskat
5
Wurde in nur wenigen Wochen zweimal von diesem Problem gebissen. Es fühlt sich einfach seltsam an, type="button"in einem <button>Element rufen zu müssen . haha ... :) Hoffentlich erinnere ich mich für das nächste Mal daran.
Sam
32

Ich bin heute auf dieses Problem gestoßen. IE geht davon aus, dass Sie das Formular senden möchten, wenn Sie die Eingabetaste in einem der Textfelder drücken - auch wenn die Felder nicht Teil eines Formulars sind und die Schaltfläche nicht vom Typ "Senden" ist.

Sie müssen das Standardverhalten des IE mit PreventDefault () überschreiben. Geben Sie in Ihrem jQuery-Selektor das div ein, das die Textfelder enthält, in denen Sie die Eingabetaste ignorieren möchten - in Ihrem Fall das div "page". Anstatt das gesamte div auszuwählen, können Sie auch die Textfelder angeben, die Sie speziell ignorieren möchten.

$('#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
quelle
Beste Lösung, wenn Sie benutzerdefinierte Komponenten verwenden müssen und type = "button" nicht hinzufügen können.
FireZenk
Danke Clinton, das hat bei mir funktioniert. Ich habe zuerst versucht, alle Buttons vom Typ "Button" zu machen, aber es hat nicht funktioniert. Dann musste ich das Ereignis unterdrücken, das beim Drücken der Eingabetaste sprudelte.
Rupesh Kumar Tiwari
Ich danke dir sehr. Ich habe in den letzten 2 Stunden an meinem Computer gewütet.
Edwin
4

Ich hatte dieses Problem mit ASP.NET WebForms:

<asp:Button />

Dies kann NICHT durch einfaches Hinzufügen von type = "button" gelöst werden, da ASP.NET es durch type = "submit" ersetzt (Sie können dieses Verhalten im Browser sehen, wenn Sie das Element untersuchen.)

Der richtige Weg, dies in asp.net zu tun, ist das Hinzufügen 

<asp:Button UseSubmitBehavior="false" />

auf die Schaltfläche. ASP fügt automatisch das Attribut type = "button" hinzu.

Guilherme
quelle
2

IE glaubt, dass jedes buttonElement eine Senden- Schaltfläche ist (unabhängig davon, ob Sie eine haben formoder nicht). Das Drücken der EnterTaste in einem Formularelement wird auch als implizite Formularübermittlung behandelt. Da es denkt, dass Sie versuchen, Ihr Formular einzureichen, hilft es Ihnen, das clickEreignis auf der Schaltfläche " Senden" auszulösen (was es denkt) .

Sie können ein keyupEreignis an das inputoder das anhängen buttonund nach dem EnterSchlüssel ( e.which === 13) und suchenreturn false;

Ketzeraffe
quelle
1

Eine jQuery-basierte Lösung, die dies für jede Schaltfläche ausführt, ist:

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

Das Klickereignis sprudelt jedoch aus irgendeinem Grund immer noch zu übergeordneten Elementen ...

lschult2
quelle
0

Für Chrome können Sie hinzufügen <button type="submit" style="display:none"/> Da Standard In Chrom Button - Typ ist „submit‘

Für IE habe ich versucht, dasselbe mit type="button"(Im IE ist der Standardschaltflächentyp "Schaltfläche"), aber es hat nicht gut funktioniert.

Hier ist also die Lösung. Fügen Sie (keypress)=xxx($event)in HTML Ihr Formular hinzu. In TS

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

Das Obige funktioniert in allen Szenarien wie Cross-Browser, normalem Klick und Tab-Flow.

Tamil.S
quelle