Schaltflächenklick-Ereignis wird ausgelöst, wenn die Eingabetaste in einer anderen Eingabe gedrückt wird (keine Formulare)

Question 1

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 im IE verhindern, behandeln Sie es so, dass 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
});

JQuery: 1.7.2
IE 9
(Funktioniert in Chrome)

Question 2

Ich hatte das gleiche Problem und habe es durch Hinzufügen gelöst type="button" Attribut zu <button> -Element, wodurch IE die Schaltfläche als einfache Schaltfläche und nicht als Senden-Schaltfläche betrachtet (was das Standardverhalten einer <button> Element).

Question 3

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

Sie müssen das Standardverhalten von IE mit preventDefault() überschreiben. Geben Sie in Ihrem jQuery-Selektor das div ein, das die Textfelder enthält, die Sie ignorieren möchten, die Eingabetaste – in Ihrem Fall das div “page”. Anstatt das gesamte div auszuwählen, können Sie auch die Textfelder angeben, die Sie 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
    }
});

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

zum Knopf. ASP fügt automatisch das type=”button”-Attribut hinzu.

Question 5

IE denkt jeder button Element ist ein einreichen Schaltfläche (ob Sie eine form oder nicht). Es behandelt auch die Presse des Enter Geben Sie ein Formularelement als implizite Formularübermittlung ein. Da es also denkt, dass Sie versuchen, Ihr Formular abzusenden, glaubt es, dass es Ihnen helfen wird, und löst das aus click Ereignis auf (was es denkt) das einreichen Taste.

Sie können eine anhängen keyup Ereignis zu entweder dem input oder der button und prüfen Sie die Enter Schlüssel (e.which === 13) und return false;

Question 6

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

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

Das Click-Ereignis wird jedoch aus irgendeinem Grund immer noch zu übergeordneten Elementen sprudeln …

Question 7

Für Chrome können Sie hinzufügen <button type="submit" style="display:none"/>
Weil in Chrome der Standard-Schaltflächentyp “Senden” ist

Für den IE habe ich es gleich mit versucht type="button"(Im IE ist der Standard-Schaltflächentyp “button”) Hat aber nicht gut funktioniert.

Hier ist also die Lösung. In HTML hinzufügen (keypress)=xxx($event) in deinem Formular. Im 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.