it-swarm.com.de

Geben Sie den Auslöser ein

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

Ich kann nichts finden, das wie ein zuverlässiger Weg zum Einstellen der Standardschaltfläche aussieht, und ich möchte es an dieser Stelle nicht unbedingt. In Abwesenheit von etwas Besserem habe ich irgendwo auf dem Formular einen Tastendruck erfasst, und wenn die <Enter>-Taste 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 hart an.

Kennt jemand eine ausgefeiltere Technik, um dies zu tun?

Gibt es in ähnlicher Weise Fallstricke bei dieser Lösung, die mir einfach nicht bewusst sind?

Vielen Dank.

140
Rob Wilkerson

Verwenden

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

sollte den Trick tun.

Der Grund ist, dass der Typ einer Schaltfläche in einem Formular implizit auf submit gesetzt ist. Wie zzzzBoz sagt, sagt die Spezifikation, dass die erste button oder input mit type="submit" in dieser Situation ausgelöst wird. Wenn Sie speziell type="button" festgelegt haben, wird der Browser sie nicht berücksichtigen.

309
Maddog

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

Die HTML5-Spezifikation gibt explizit an, was in implicit submissions geschieht.

Die Standardschaltfläche eines Formularelements ist die erste Schaltfläche zum Senden in der Baumstruktur, deren Formularbesitzer dieses Formularelement ist.

Wenn der Benutzeragent das implizite Senden des Formulars durch den Benutzer unterstützt (z. B. auf einigen Plattformen die Eingabetaste drückt, während ein Textfeld das Formular implizit sendet), dann für ein Formular, dessen Standardschaltfläche eine definierte Aktivierung aufweist Das Verhalten muss dazu führen, dass der Benutzeragent synthetische Klickaktivierungsschritte für diese Standardschaltfläche ausführt.

Dies wurde in der HTML4-Spezifikation nicht explizit gemacht, jedoch haben Browser bereits das 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, ist, den Submit-Button als erstes [type="submit"]-Element in das Formular einzufügen, das untere Ende des Formulars mit css zu füllen und den Submit-Button absolut an der gewünschten Stelle anzuordnen.

49
zzzzBov

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

Gemäß der Spezifikation html 5 für Buttons wird ein Button ohne type-Attribut genauso behandelt wie ein Button, dessen Typ auf "submit" gesetzt ist, d. H. Wenn Sie den Typ der Schaltfläche auf "Schaltfläche" setzen, sollte das Verhalten, das Sie sehen, verhindert werden.

Ich bin mir nicht sicher, ob der Browser dabei unterstützt wird, aber in der html 4.01-Spezifikation für die Schaltflächen wurde dasselbe Verhalten angegeben.

19
Leinster

Durch Drücken der Eingabetaste bei fokussiertem <input type="text"> lösen Sie das Ereignis 'click' des ersten positionierten Elements aus: <button> oder <input type="submit">. Wenn Sie in <textarea> die Eingabetaste drücken, erstellen Sie einfach eine neue Textzeile.

Siehe das Beispiel hier .

Ihr Code verhindert, dass in <textarea> eine neue Textzeile erstellt wird. Daher müssen Sie nur den Tastendruck für <input type="text"> eingeben.

Aber warum müssen Sie Enter im Textfeld drücken? Wenn Sie das Formular mit der Eingabetaste abschicken möchten, der <button> jedoch der erste im Layout bleiben soll, spielen Sie einfach mit dem Markup: Platzieren Sie den <input type="submit">-Code vor dem <button> und speichern Sie das benötigte 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`*/
});
9
Feniks502

Sie können Javascript verwenden, um die Formularübermittlung bis zum richtigen 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>

Wenn Sie die EINGABETASTE drücken, wird das Formular immer noch zum Senden ausgelöst, das JavaScript wird jedoch nicht gesendet, bis Sie tatsächlich auf die Schaltfläche klicken.

2
Dave

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

1
Sparafusile

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

0
Ramki

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 nicht reflectDefault () verwenden, werden andere Tasten ausgelöst.

0
Mehmet Kus

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

0
Satyajit

Meine Situation enthält zwei Submit-Schaltflächen innerhalb des Formularelements: Update und Delete. Die Schaltfläche Delete löscht ein Bild und die Schaltfläche Update aktualisiert die Datenbank mit den Textfeldern im Formular.

Da sich die Schaltfläche Delete zuerst im Formular befand, war dies die Standardschaltfläche auf dem Schlüssel Enter. Nicht was ich wollte. Der Benutzer würde erwarten, nach Änderung einiger Textfelder Enter treffen zu können.

Ich habe meine Antwort zur 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, definierte ich das Formular, zu dem jede Schaltfläche gehört, mit dem <button> form="bla"-Attribut. Ich setze die Delete-Schaltfläche auf ein Formular, das nicht vorhanden ist, und setze die Update-Schaltfläche, die ich bei der Enter-Taste auslösen wollte, auf das Formular, in dem sich der Benutzer bei der Texteingabe befindet.

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

0
Dan Vachon