Klicken Sie auf die Schaltfläche Trigger eingeben

168

Ich habe eine Seite mit zwei Schaltflächen. Einer ist ein <button>Element und der andere ist ein <input type="submit">. Die Schaltflächen werden in dieser Reihenfolge auf der Seite angezeigt. Wenn ich mich irgendwo im Formular in einem Textfeld befinde und drücke <Enter>, wird das clickEreignis des Schaltflächenelements ausgelöst. Ich gehe davon aus, dass das Button-Element zuerst sitzt.

Ich kann nichts finden, was nach einer zuverlässigen Methode zum Einstellen der Standardschaltfläche aussieht, und ich möchte dies an dieser Stelle auch nicht unbedingt tun. In Ermangelung von etwas Besserem habe ich irgendwo auf dem Formular einen Tastendruck erfasst, und wenn es die <Enter>Taste war, die gedrückt wurde, negiere ich sie einfach:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

Soweit ich das beurteilen kann, scheint es zu funktionieren, aber es fühlt sich unglaublich mit Schinkenfäusten an.

Kennt jemand eine ausgefeiltere Technik dafür?

Gibt es auch Fallstricke bei dieser Lösung, die mir einfach nicht bewusst sind?

Vielen Dank.

Rob Wilkerson
quelle
1
Dies kann auch bei Verwendung von winkelreaktiven Formen auftreten, die nicht nur für JQuery, sondern auch für die Winkelentwicklung nützlich sind.
HDJEMAI

Antworten:

362

Verwenden von

<button type="button">Whatever</button>

sollte den Trick machen.

Der Grund dafür ist, dass für eine Schaltfläche in einem Formular der Typ implizit festgelegt ist submit. Wie zzzzBoz sagt, sagt die Spezifikation, dass das erste buttonoder inputmit das type="submit"ist, was in dieser Situation ausgelöst wird. Wenn Sie dies speziell festlegen type="button", wird es vom Browser nicht mehr berücksichtigt.

Maddog
quelle
1
süß, danke, scheint wie Schaltflächen in IE8 für mich, die <enter> Klicks erfassen, type="button"scheint dies zu lösen ... Danke! ps eine Idee, warum das so ist? dh8 Schaltflächen als Typ Submit behandeln? Seltsam.
Quang Van
3
Gute Antwort, dies weist den Browser darauf hin, welche Schaltflächen keine Senden-Schaltflächen sind, sodass er das Richtige tun kann, ohne das Markup neu zu ordnen.
Don Spaulding
2
Die Antwort von @ Leinster deckt den Grund für diese Eigenart ab: "Eine Schaltfläche ohne Typattribut wird genauso behandelt wie eine Schaltfläche, deren Typ zum Senden festgelegt ist."
Eimer
2
Gleiches gilt für <input type="submit"/>(löst einen Klick aus) und <input type="button"/>(löst keinen Klick aus)
Marius Balčytis
1
Unglaublich!! Ich war so verwirrt.
Margus Pala
54

Es ist wichtig, die HTML-Spezifikationen zu lesen, um wirklich zu verstehen, welches Verhalten zu erwarten ist:

Die HTML5-Spezifikation gibt explizit an, was passiert inimplicit submissions :

Die Standardschaltfläche eines Formularelements ist die erste Übermittlungsschaltfläche in Baumreihenfolge, deren Formularbesitzer dieses Formularelement ist.

Wenn der Benutzeragent unterstützt, dass der Benutzer ein Formular implizit senden kann (z. B. wenn auf einigen Plattformen die Eingabetaste gedrückt wird, während ein Textfeld fokussiert ist, wird das Formular implizit gesendet), gilt dies für ein Formular, dessen Standardschaltfläche eine definierte Aktivierung aufweist Das Verhalten muss dazu führen, dass der Benutzeragent Schritte zur Aktivierung synthetischer Klicks auf dieser Standardschaltfläche ausführt.

Dies wurde in der HTML4-Spezifikation nicht explizit angegeben, jedoch haben Browser bereits implementiert, was in der HTML5-Spezifikation beschrieben ist (weshalb es explizit enthalten ist).

Bearbeiten, um hinzuzufügen:

Die einfachste Antwort, die ich mir vorstellen kann, besteht darin, die Schaltfläche "Senden" als erstes [type="submit"]Element im Formular einzufügen, mit CSS am unteren Rand des Formulars einen Auffüllpunkt hinzuzufügen und die Schaltfläche "Senden" unbedingt dort zu platzieren, wo Sie es möchten.

zzzzBov
quelle
Dort habe ich IE verflucht, es stellte sich heraus, dass es die ganze Zeit mein schlampiges Markup war! Prost!
Shawson
2
Wow ... Danke, guter Herr. Dies war ein zufälliger Fund. Ich konnte nicht einmal verstehen, warum ein Klickereignis durch
Drücken der
Die Verbindung ist unterbrochen. Ich denke, w3c.github.io/html/sec-forms.html#implicit-submission ist die neue URL.
TJ.
22

Ich glaube nicht, dass Sie Javascript oder CSS benötigen, um dies zu beheben.

Gemäß der HTML 5-Spezifikation für Schaltflächen wird eine Schaltfläche ohne Typattribut genauso behandelt wie eine Schaltfläche, deren Typ auf "Senden" gesetzt ist, dh als Schaltfläche zum Senden des enthaltenen Formulars. Wenn Sie den Typ der Schaltfläche auf "Schaltfläche" setzen, sollte das angezeigte Verhalten verhindert werden.

Ich bin mir nicht sicher, ob der Browser dies unterstützt, aber das gleiche Verhalten wurde in der HTML 4.01-Spezifikation für Schaltflächen angegeben, daher erwarte ich, dass es ziemlich gut ist.

Leinster
quelle
13

Durch Drücken der Eingabetaste auf fokussiert <input type="text">lösen Sie ein Klickereignis für das erste positionierte Element aus: <button>oder <input type="submit">. Wenn Sie die Eingabetaste drücken, erstellen <textarea>Sie einfach eine neue Textzeile.

Siehe das Beispiel hier .

Ihr Code verhindert, dass eine neue Textzeile eingefügt wird <textarea>, sodass Sie den Tastendruck nur für abfangen müssen <input type="text">.

Aber warum müssen Sie Enterin Textfeld drücken ? Wenn Sie ein Formular durch Drücken der Eingabetaste senden möchten, das Formular jedoch das <button>erste im Layout bleiben muss, spielen Sie einfach mit dem Markup: Stellen Sie den <input type="submit">Code vor das <button>und speichern Sie das gewünschte Layout mit CSS.

'Enter' abfangen und Markup speichern:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});
Feniks502
quelle
Sollte die if-Anweisung nicht eine Klammer haben, um beide Anweisungen nur auszuführen, wenn die Eingabetaste gedrückt wird? Andernfalls erfolgt die Übermittlung bei jedem Tastendruck. Erinnert mich an goto fail. :)
Danmiser
13

Wenn Sie ein <button>Element standardmäßig verwenden, wird diese Schaltfläche berücksichtigt. type="submit"Wenn Sie die Schaltfläche definieren type="button", wird dies nicht <button>als Senden-Schaltfläche betrachtet.

Ram Thota
quelle
2

Durch Drücken der Eingabetaste im Textfeld eines Formulars wird das Formular standardmäßig gesendet. Wenn Sie nicht möchten, dass es so funktioniert, müssen Sie die Eingabetaste erfassen und wie zuvor verwenden. Daran führt kein Weg vorbei. Dies funktioniert auch dann, wenn im Formular keine Schaltfläche vorhanden ist.

Sparafusile
quelle
4
Ich denke nicht, dass das Problem darin besteht, dass das Formular eingereicht wird, sondern dass es die clickAktion auf den Schaltflächenelement-Wunsch auslöst. Dies ist eine unbeabsichtigte Folge
Martin Jespersen
Du hast Recht. In beiden Fällen ist das Ergebnis dasselbe - Sie müssen die Eingabetaste erfassen, um unerwünschte Formularübermittlungen zu verhindern.
Sparafusile
2

Sie können Javascript verwenden, um die Formularübermittlung bis zum entsprechenden Zeitpunkt zu blockieren. Ein sehr grobes Beispiel:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

Durch Drücken der Eingabetaste wird das Formular weiterhin gesendet, aber das Javascript verhindert, dass es tatsächlich gesendet wird, bis Sie tatsächlich die Taste drücken.

Dave
quelle
2

Dom Beispiel

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

Javascript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

Wenn Sie präventDefault () nicht verwenden, werden andere Schaltflächen ausgelöst.

Mehmet Ali Kuş
quelle
0

Ich würde es wie folgt machen: Überprüfen Sie im Handler für das Ereignis onclick der Schaltfläche (nicht senden) den Schlüsselcode des Ereignisobjekts. Wenn es "enter" ist, würde ich false zurückgeben.

Satyajit
quelle
Dieser Schlüsselcode wird immer so übergeben, als wäre es ein Klick. Darin liegt das Problem. :-)
Rob Wilkerson
Dann machst du es wohl auf die harte Tour - behandle auch das Onkeydown-Ereignis auf der Schaltfläche. Dem Handler wird ein keyEvent übergeben. Überprüfen Sie den Schlüsselcode -> Wenn 13, verhindern Sie Default. Auf diese Weise können Sie Benutzer auch auf dieser Schaltfläche die Eingabetaste drücken lassen, ohne den Nebeneffekt der Ausführung des Klickereignisses zu haben.
Satyajit
0

Meine Situation hat zwei SubmitSchaltflächen innerhalb des Formularelements: Updateund Delete. Die DeleteSchaltfläche löscht ein Bild und die UpdateSchaltfläche aktualisiert die Datenbank mit den Textfeldern im Formular.

Da sich die DeleteSchaltfläche zuerst im Formular befand, war sie die Standardschaltfläche auf der EnterTaste. Nicht was ich wollte. Der Benutzer würde erwarten, Enternach dem Ändern einiger Textfelder treffen zu können .

Ich habe meine Antwort auf die Einstellung der Standardschaltfläche hier gefunden :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Ohne ein Skript zu verwenden, habe ich mithilfe des <button> form="bla"Attributs das Formular definiert, zu dem jede Schaltfläche gehört . Ich setze die DeleteSchaltfläche auf ein Formular, das nicht existiert, und setze die UpdateSchaltfläche, die ich auf dem EnterSchlüssel auslösen möchte, auf das Formular, in dem sich der Benutzer bei der Texteingabe befinden würde.

Dies ist das einzige, was bisher für mich funktioniert hat.

Dan Vachon
quelle
1
Bitte überprüfen Sie, wie auf Stackoverflow zu antworten
Morse
0

Sie können so etwas tun.

Binden Sie Ihr Ereignis in eine gemeinsame Funktion und rufen Sie das Ereignis entweder per Tastendruck oder per Knopfdruck auf.

beispielsweise.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});
neuer Entwickler
quelle
-1

Ich habe eine Schaltfläche vom Typ "Senden" als erstes Element des Formulars hinzugefügt und es unsichtbar gemacht ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Funktioniert wie eine Aktualisierung der Site, dh ich mache nichts, wenn die Schaltfläche gedrückt wird, außer dass die Site erneut geladen wird. Für mich funktioniert gut ...

Torabe
quelle