Absenden eines Formulars durch Drücken der Eingabetaste, ohne dass eine Schaltfläche zum Absenden vorhanden ist

Question

Ich versuche, ein Formular durch Drücken der Eingabetaste abzuschicken, aber es wird keine Schaltfläche zum Abschicken angezeigt. Ich möchte nicht in JavaScript zu erhalten, wenn möglich, da ich alles auf allen Browsern (die einzige JS Weg, den ich kenne, ist mit Ereignissen) arbeiten möchten.

Im Moment sieht das Formular wie folgt aus:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

Das funktioniert ziemlich gut. Die Schaltfläche "Submit" funktioniert, wenn der Benutzer die Eingabetaste drückt, und die Schaltfläche wird in Firefox, IE, Safari, Opera und Chrome nicht angezeigt. Dennoch gefällt mir die Lösung nicht, da es schwer zu sagen ist, ob sie auf allen Plattformen mit allen Browsern funktionieren wird.

Kann jemand eine bessere Methode vorschlagen? Oder ist dies die beste Methode, die es gibt?

Answer 1

Update 2022: Verwenden Sie stattdessen dies

<input type="submit" hidden />

---

Hinweis - Veraltete Antwort

Bitte verwenden Sie nicht position: absolute im Jahr 2021+. Es wird empfohlen, die hidden stattdessen das Attribut. Andernfalls schauen Sie unten nach und wählen Sie eine bessere, modernere Antwort.

Essayez :

<input type="submit" style="position: absolute; left: -9999px"/>

Dadurch wird die Schaltfläche weit nach links aus dem Bildschirm herausgeschoben. Die nette Sache mit diesem ist, würden Sie graceful Degradation erhalten, wenn CSS deaktiviert ist.

Update - Umgehung für IE7

Wie von Bryan Downing vorgeschlagen + mit tabindex um zu verhindern, dass die Registerkarte diese Schaltfläche erreicht (von Ates Goral):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

Answer 2

Ich glaube, Sie sollte den Weg über Javascript gehen, oder zumindest würde ich das tun:

<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find('input[type=submit]').hide();
    });
});
</script>

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" />
</form>

Answer 3

Haben Sie das schon ausprobiert?

<input type="submit" style="visibility: hidden;" />

Da die meisten Browser die visibility:hidden und es funktioniert nicht wirklich wie display:none Ich denke aber, dass es in Ordnung sein sollte. Ich habe es nicht wirklich selbst getestet, also CMIIW.

Answer 4

Eine andere Lösung ohne die Schaltfläche "Senden":

HTML

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

jQuery

$(document).ready(function() {

  $('.submit_on_enter').keydown(function(event) {
    // enter has keyCode = 13, change it if you want to use another button
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });

});

Answer 5

Für alle, die sich in Zukunft mit dieser Antwort befassen möchten: HTML5 implementiert ein neues Attribut für Formularelemente, hidden die automatisch angewendet wird display:none zu Ihrem Element.

z.B..

<input type="submit" hidden />