Klicken Sie auf die Schaltfläche Trigger eingeben

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.

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.

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.

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.

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`*/
});

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.

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.

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.

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.

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.

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.

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);
  }
});

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