Geben Sie die Eingabetaste in einem HTML-Formular ein, anstatt die Schaltfläche zu aktivieren

Ich habe ein HTML-Formular mit einer einzigen submitEingabe, aber auch verschiedenen buttonElementen. Wenn der Benutzer die Eingabetaste drückt, würde ich erwarten, dass das Formular tatsächlich gesendet wird, aber stattdessen (zumindest in Chrome 15) stelle ich fest, dass es das erste auslöst button(da dies früher im HTML als in der submitEingabe erfolgt) , Ich vermute).

Ich weiß, dass Sie Browser im Allgemeinen nicht zwingen können, eine bestimmte submitEingabe zu bevorzugen , aber ich dachte wirklich, dass sie submitEingaben gegenüber buttonElementen bevorzugen würden . Gibt es eine kleine Änderung, die ich am HTML vornehmen kann, damit dies funktioniert, oder muss ich eine Art Javascript-Ansatz wählen?

Hier ist ein grobes Modell des HTML:

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>

Sie benötigen kein JavaScript, um Ihre Standard-Senden-Schaltfläche oder -Eingabe auszuwählen. Sie müssen es nur mit markieren type="submit", und die anderen Schaltflächen markieren sie mit type="button". In Ihrem Beispiel:

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>

Sie können jQuery verwenden:

$(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});

Versuchen Sie dies, wenn die Eingabetaste gedrückt wurde, können Sie es zum Beispiel so erfassen. Ich habe neulich eine Antwort entwickelt. Geben Sie die HTML-Schaltfläche ausgewählt an , um zu sehen, ob dies hilft.

Geben Sie den Formularnamen an, z. B. yourFormNamesollten Sie das Formular senden können, ohne sich auf das Formular zu konzentrieren.

document.onkeypress = keyPress;

function keyPress(e){
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3){
   //  myFunc1();
   document.yourFormName.submit();
  }
}

$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});

Ich habe gerade ein Problem damit. Meins war ein Sturz vom Ändern des inputzu einem buttonund ich hatte einen schlecht geschriebenen />Tag-Terminator:

So hatte ich:

<button name="submit_login" type="submit" class="login" />Login</button>

Und habe es gerade geändert, um:

<button name="submit_login" type="submit" class="login">Login</button>

Jetzt funktioniert wie ein Zauber, immer die nervigen kleinen Dinge ... HTH

Da es nur eine (oder bei dieser Lösung möglicherweise nicht einmal eine) Schaltfläche zum Senden gibt, ist hier eine jQuery-basierte Lösung, die für mehrere Formulare auf derselben Seite funktioniert ...

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>

Ich habe dies gerade in Chrome und Firefox und IE10 gewirbelt.

Wie oben erwähnt - stellen Sie sicher, dass Sie mit type = "button", "reset", "submit" usw. markiert haben, um sicherzustellen, dass die richtige Schaltfläche korrekt kaskadiert und ausgewählt wird.

Vielleicht auch alle so einstellen, dass sie die gleiche Form haben (dh alle, die für mich funktionierten)