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 click
Ereignis 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.
Antworten:
Verwenden von
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 erstebutton
oderinput
mit dastype="submit"
ist, was in dieser Situation ausgelöst wird. Wenn Sie dies speziell festlegentype="button"
, wird es vom Browser nicht mehr berücksichtigt.quelle
type="button"
scheint dies zu lösen ... Danke! ps eine Idee, warum das so ist? dh8 Schaltflächen als Typ Submit behandeln? Seltsam.<input type="submit"/>
(löst einen Klick aus) und<input type="button"/>
(löst keinen Klick aus)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 in
implicit submissions
: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.quelle
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.
quelle
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
Enter
in 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:
quelle
Wenn Sie ein
<button>
Element standardmäßig verwenden, wird diese Schaltfläche berücksichtigt.type="submit"
Wenn Sie die Schaltfläche definierentype="button"
, wird dies nicht<button>
als Senden-Schaltfläche betrachtet.quelle
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.
quelle
click
Aktion auf den Schaltflächenelement-Wunsch auslöst. Dies ist eine unbeabsichtigte FolgeSie können Javascript verwenden, um die Formularübermittlung bis zum entsprechenden Zeitpunkt zu blockieren. Ein sehr grobes Beispiel:
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.
quelle
Dom Beispiel
Javascript
Wenn Sie präventDefault () nicht verwenden, werden andere Schaltflächen ausgelöst.
quelle
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.
quelle
Meine Situation hat zwei
Submit
Schaltflächen innerhalb des Formularelements:Update
undDelete
. DieDelete
Schaltfläche löscht ein Bild und dieUpdate
Schaltfläche aktualisiert die Datenbank mit den Textfeldern im Formular.Da sich die
Delete
Schaltfläche zuerst im Formular befand, war sie die Standardschaltfläche auf derEnter
Taste. Nicht was ich wollte. Der Benutzer würde erwarten,Enter
nach dem Ändern einiger Textfelder treffen zu können .Ich habe meine Antwort auf die Einstellung der Standardschaltfläche hier gefunden :
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 dieDelete
Schaltfläche auf ein Formular, das nicht existiert, und setze dieUpdate
Schaltfläche, die ich auf demEnter
Schlü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.
quelle
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.
quelle
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 ...quelle