Wie wird ein Formular abgeschickt, wenn die Eingabetaste gedrückt wird?

Question

Kann mir jemand sagen, wie ich ein HTML-Formular abschicken kann, wenn die Return-Taste gedrückt wird und keine Schaltflächen im Formular vorhanden sind? Die Schaltfläche "Senden" ist nicht vorhanden . Ich verwende stattdessen ein benutzerdefiniertes Div.

Answer 1

Um das Formular abzuschicken, wenn die Eingabetaste gedrückt wird, erstellen Sie eine Javascript-Funktion nach diesem Muster.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

Dann fügen Sie das Ereignis zu dem Bereich hinzu, den Sie z. B. für das div-Tag benötigen:

<div onKeyPress="return checkSubmit(event)"/>

Dies ist allerdings auch das Standardverhalten von Internet Explorer 7 (wahrscheinlich auch von früheren Versionen).

Answer 2

IMO ist dies die sauberste Antwort:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

Besser noch, wenn Sie Javascript verwenden, um das Formular mit dem benutzerdefinierten div zu übermitteln, sollten Sie auch Javascript verwenden, um es zu erstellen und den Stil display:none für die Schaltfläche festzulegen. Auf diese Weise sehen auch Benutzer mit deaktiviertem Javascript die Schaltfläche "Submit" und können darauf klicken.

---

Es wurde festgestellt, dass display:none den IE veranlasst, die Eingabe zu ignorieren. Ich habe eine neues JSFiddle-Beispiel das als Standardformular beginnt und die progressive Erweiterung verwendet, um die Übermittlung auszublenden und das neue Div zu erstellen. Ich habe das CSS-Styling von StriplingWarrior .

Answer 3

Ich habe verschiedene javascript/jQuery-basierte Strategien ausprobiert, aber ich hatte immer wieder Probleme. Das letzte Problem, das auftrat, betraf die versehentliche Übermittlung, wenn der Benutzer die Eingabetaste drückt, um aus der in den Browser integrierten Liste zur automatischen Vervollständigung auszuwählen. Ich bin schließlich zu dieser Strategie übergegangen, die bei allen von meinem Unternehmen unterstützten Browsern zu funktionieren scheint:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Dies ist ähnlich wie die derzeit akzeptierte Antwort von Chris Marasti-Georg, aber durch die Vermeidung von display: none scheint sie in allen Browsern korrekt zu funktionieren.

Update

Ich habe den obigen Code bearbeitet, um eine negative tabindex damit die Tabulatortaste nicht erfasst wird. Obwohl dies technisch gesehen in HTML 4 nicht validiert wird, enthält die HTML5-Spezifikation eine Sprache, mit der es so funktioniert, wie die meisten Browser es ohnehin schon implementiert haben.

Answer 4

Verwenden Sie die <button> Tag. Aus dem W3C-Standard:

Schaltflächen, die mit dem BUTTON-Element erstellt wurden, funktionieren genauso wie Schaltflächen, die mit dem INPUT-Element erstellt wurden, bieten jedoch umfangreichere Rendering-Möglichkeiten: Das BUTTON-Element kann einen Inhalt haben. Ein BUTTON-Element, das ein Bild enthält, funktioniert beispielsweise wie ein INPUT-Element, dessen Typ auf "Bild" eingestellt ist, und kann diesem ähneln, aber der Typ des BUTTON-Elements erlaubt Inhalte.

Im Grunde gibt es ein weiteres Tag, <button> die erfordert kein Javascript die auch ein Formular einreichen können. Es kann ähnlich gestaltet werden wie ein <div> Tag (einschließlich <img /> innerhalb des Schaltflächen-Tags). Die Schaltflächen aus dem <input /> Tag sind nicht annähernd so flexibel.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Es gibt drei Typen, die auf dem Bildschirm eingestellt werden können <button> ; sie entsprechen dem <input> Tastenarten.

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Normen

• W3C-Wiki über <button>
• HTML5 <button>
• HTML4 <button>

Ich benutze <button> Tags mit css-sprites und ein bisschen css Styling, um farbenfrohe und funktionale Formularschaltflächen zu erhalten. Beachten Sie, dass es möglich ist, css für, zum Beispiel zu schreiben, <a class="button"> Links zum Styling mit dem <button> Element.

Answer 5

Ich glaube, das ist es, was Sie wollen.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

Jedes Mal, wenn eine Taste gedrückt wird, wird die Funktion enter() aufgerufen. Wenn die gedrückte Taste mit der Eingabetaste (13) übereinstimmt, wird die Funktion sendform() aufgerufen und das erste gefundene Formular wird gesendet. Dies gilt nur für Firefox und andere standardkonforme Browser.

Wenn Sie diesen Code nützlich finden, stimmen Sie bitte für mich!