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

Kann mir bitte jemand sagen, wie ich ein HTML-Formular senden soll, wenn die Eingabetaste gedrückt wird und wenn das Formular keine Schaltflächen enthält? Die Schaltfläche "Senden" ist nicht vorhanden . Ich benutze stattdessen ein benutzerdefiniertes Div.

IMO, das ist 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 senden, sollten Sie auch Javascript verwenden, um es zu erstellen und die Anzeige festzulegen: kein Stil auf der Schaltfläche. Auf diese Weise sehen Benutzer mit deaktiviertem Javascript weiterhin die Schaltfläche "Senden" und können darauf klicken.

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

Um das Formular zu senden, wenn die Eingabetaste gedrückt wird, erstellen Sie eine Javascript-Funktion in diesem Sinne.

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

Fügen Sie dann das Ereignis zu einem beliebigen Bereich hinzu, z. B. auf dem div-Tag:

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

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

Ich habe verschiedene Javascript / jQuery-basierte Strategien ausprobiert, aber ich hatte immer wieder Probleme. Das letzte Problem war die versehentliche Übermittlung, wenn der Benutzer mit der Eingabetaste aus der integrierten automatischen Vervollständigungsliste des Browsers auswählt. Ich habe schließlich zu dieser Strategie gewechselt, die auf 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 ähnelt der derzeit akzeptierten Antwort von Chris Marasti-Georg, display: nonescheint jedoch bei Vermeidung in allen Browsern korrekt zu funktionieren.

Aktualisieren

Ich habe den obigen Code tabindexso bearbeitet, dass er ein Negativ enthält, damit die Tabulatortaste nicht erfasst wird. Während dies in HTML 4 technisch nicht validiert werden kann, enthält die HTML5-Spezifikation eine Sprache, damit es so funktioniert, wie es die meisten Browser ohnehin bereits implementiert haben.

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

Mit dem BUTTON-Element erstellte Schaltflächen funktionieren genauso wie mit dem INPUT-Element erstellte Schaltflächen, bieten jedoch umfassendere Rendermöglichkeiten: Das BUTTON-Element enthält möglicherweise Inhalt. Beispielsweise funktioniert ein BUTTON-Element, das ein Bild enthält, wie ein INPUT-Element, dessen Typ auf "Bild" gesetzt ist, und ähnelt möglicherweise diesem, aber der BUTTON-Elementtyp erlaubt Inhalt.

Grundsätzlich gibt es ein anderes Tag, für <button>das kein Javascript erforderlich ist und das auch ein Formular senden kann. Es kann sehr ähnlich wie ein <div>Tag gestaltet werden (auch <img />innerhalb des Button-Tags). Die Schaltflächen des <input />Tags sind bei weitem nicht so flexibel.

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

Es gibt drei Typen, die auf dem eingestellt werden können <button>; Sie werden den <input>Schaltflächentypen zugeordnet.

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

Standards

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

Ich benutze <button>Tags mitCSS-Sprites und ein bisschen von CSSStyling für farbenfrohe und funktionale Formknöpfe. Beachten Sie, dass es möglich ist, CSS für beispielsweise <a class="button">Links zu schreiben, die für das Styling mit dem <button>Element freigegeben sind.

Ich glaube, das ist was du willst.

//<![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();
}
//]]>

Bei jedem Tastendruck wird die Funktion enter () aufgerufen. Wenn die gedrückte Taste mit der Eingabetaste (13) übereinstimmt, wird sendform () aufgerufen und das erste angetroffene Formular gesendet. Dies gilt nur für Firefox- und andere standardkonforme Browser.

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

So mache ich das mit jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Anderes Javascript wäre nicht zu unterschiedlich. Der Haken sucht nach dem Tastendruckargument "13", der Eingabetaste

Verwenden Sie das folgende Skript.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

Rufen Sie für jedes Feld, das das Formular senden soll, wenn der Benutzer die Eingabetaste drückt, die Submitenter-Funktion wie folgt auf.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Ich benutze diese Methode:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

Grundsätzlich füge ich nur eine unsichtbare Eingabe vom Typ Bild hinzu (wobei " spacer.gif " ein transparentes 1x1- GIF ist).

Auf diese Weise kann ich dieses Formular entweder mit der Schaltfläche "Senden" oder einfach durch Drücken der Eingabetaste auf der Tastatur senden .

Das ist der Trick!

Warum wenden Sie die div-Submit-Stile nicht einfach auf eine Submit-Schaltfläche an? Ich bin mir sicher, dass es dafür ein Javascript gibt, aber das wäre einfacher.

Wenn Sie asp.net verwenden, können Sie das Attribut defaultButton im Formular verwenden.

Ich denke, Sie sollten eigentlich einen Submit-Button oder ein Submit-Bild haben ... Haben Sie einen bestimmten Grund für die Verwendung eines "Submit Div"? Wenn Sie nur benutzerdefinierte Stile möchten, empfehle ich <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Ausgehend von den Antworten hat dies für mich funktioniert, vielleicht findet es jemand nützlich.

Html

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Ähnlich wie im Beispiel von Chris Marasti-Georg, stattdessen mit Inline-Javascript. Fügen Sie im Wesentlichen onkeypress zu den Feldern hinzu, mit denen die Eingabetaste arbeiten soll. Dieses Beispiel wirkt sich auf das Kennwortfeld aus.

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Da display: noneSchaltflächen und Eingaben in Safari und IE nicht funktionieren, stellte ich fest, dass der einfachste Weg, der keine zusätzlichen Javascript-Hacks erfordert , darin besteht <button />, dem Formular einfach eine absolut positionierte Option hinzuzufügen und es weit vom Bildschirm entfernt zu platzieren.

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

Dies funktioniert in der aktuellen Version aller gängigen Browser ab September 2016.

Offensichtlich ist es empfehlenswert (und semantisch korrekter), das nur <button/>wie gewünscht zu stylen .

Die Verwendung des Attributs "Autofokus" dient dazu, der Schaltfläche standardmäßig einen Eingabefokus zu geben. Wenn Sie auf ein Steuerelement im Formular klicken, wird auch der Fokus auf das Formular gelegt, sodass das Formular auf die RÜCKGABE reagieren muss. Der "Autofokus" erledigt dies für Sie, falls der Benutzer nie auf ein anderes Steuerelement im Formular geklickt hat.

Der "Autofokus" macht also den entscheidenden Unterschied, wenn der Benutzer vor dem Drücken von RETURN nie auf eines der Formularsteuerelemente geklickt hat.

Aber selbst dann müssen noch zwei Bedingungen erfüllt sein, damit dies ohne JS funktioniert:

a) Sie müssen eine Seite angeben, zu der Sie wechseln möchten (wenn sie leer bleibt, funktioniert sie nicht). In meinem Beispiel ist es hello.php

b) Die Steuerung muss sichtbar sein. Sie können es möglicherweise von der Seite verschieben, um es auszublenden, aber Sie können nicht display: none oder sichtbarkeit: hidden verwenden. Was ich getan habe, war, den Inline-Stil zu verwenden, um ihn einfach um 200 Pixel von der Seite nach links zu verschieben. Ich habe die Höhe 0px so eingestellt, dass sie keinen Platz beansprucht. Denn sonst können andere Steuerelemente oben und unten noch gestört werden. Oder Sie können das Element auch schweben lassen.

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>