Senden eines Formulars durch Drücken der Eingabetaste ohne Senden-Schaltfläche

Lesezeit: 8 Minuten

Nun, ich versuche, ein Formular zu senden, indem ich die Eingabetaste drücke, aber keine Schaltfläche “Senden” angezeigt wird. Ich möchte möglichst nicht in JavaScript einsteigen, da ich möchte, dass alles auf allen Browsern funktioniert (der einzige JS-Weg, den ich kenne, ist mit Ereignissen).

Im Moment sieht das Formular so 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>

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

Kann jemand eine bessere Methode vorschlagen? Oder ist das so gut wie es geht?

Kleiner Punkt, der möglicherweise ein paar Zeichen von Ihrem CSS entfernt und normalerweise automatisch ausgeführt wird, sind Minimierer – Sie benötigen keine Einheiten für Nulllängenmessungen. 0px = 0pt = 0em = 0em usw.

– pwst

12. Mai 2013 um 16:30 Uhr
@pwdst danke für den Hinweis – ich komme aus der Python-Welt, also ist “explizit besser als implizit” und frage mich wirklich, ob dies in CSS der Fall ist, oder haben CSS-Ersteller eine andere Ausdrucksweise?

– Ericmjl

3. August 2017 um 16:59 Uhr
Null ist hier die Ausnahme von der Regel @ericmjl – 0px == 0em == 0% == 0vh == 0vh usw. Bei anderen (Nicht-Null-) Längenmessungen ist es nicht nur schlechte Praxis, sondern gegen Standards, keine Einheiten anzugeben und Sie werden ein unterschiedliches Verhalten in Benutzeragenten (Browsern) sehen. Sehen developer.mozilla.org/en-US/docs/Web/CSS/length und drafts.csswg.org/css-values-3/#lengths

– pwst

4. August 2017 um 10:04 Uhr
Geben Sie im Zweifelsfall eine explizite Längeneinheit an, dh.

– pwst

4. August 2017 um 10:05 Uhr
Es schadet zwar nicht, die Einheit mit 0 zu ergänzen, aber keine zu haben, sollte unabhängig von der Sprache zu 100% gültig sein, tatsächlich bis hin zu mathematischen Abstraktionen. OTOH, eine praktische Verwendung von Haben vs. Nicht-Haben besteht darin, die Botschaft zu vermitteln, ob die gegebene Eigenschaft “wirklich dazu bestimmt ist, 0 zu sein und so zu bleiben” (keine Einheit), vs. “das Ding ist jetzt zufällig null, kann aber nach Geschmack angepasst werden; oder was auch immer …” (mit Einheit).

– Gr.

16. März 2018 um 17:26 Uhr

Ates Goral

Update 2022: Verwenden Sie stattdessen dies

<input type="submit" hidden />

Hinweis – Veraltete Antwort
Bitte nicht verwenden `position: absolute` im Jahr 2021+. Es wird empfohlen, die zu verwenden `hidden` Attribut stattdessen. Schauen Sie andernfalls nach unten und wählen Sie eine bessere, modernere Antwort aus.

Versuchen:

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

Dadurch wird die Schaltfläche weit nach links aus dem Bildschirm geschoben. Das Schöne daran ist, dass Sie eine elegante Verschlechterung erhalten, wenn CSS deaktiviert ist.

Update – Problemumgehung für IE7

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

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

Ich habe diese Lösung gerade in IE7 mit dem gleichen Ergebnis wie Erebus ausprobiert. Der folgende Code behebt es: position: absolute; width: 1px; height: 1px; left: -9999px;

– Bryan Downing

3. November 2010 um 1:01 Uhr
Was für ein schrecklicher Hack 🙁 Warum ist HTML überhaupt so? Gibt es einen guten Grund dafür, dass die Eingabe in diesem Fall nicht funktioniert?

– Nornagon

10. April 2011 um 7:40 Uhr
@nornagon: Wenn du denkst, dass dieser Hack schrecklich ist, kannst du gerne einen weniger schrecklichen vorschlagen. HTML ist, was es ist …

– Ates Goral

10. April 2011 um 21:07 Uhr
@MooseFactory tabindex="-1"

– Ates Goral

13. Juli 2012 um 16:04 Uhr
“Das Schöne ist … elegante Degradation, wenn CSS deaktiviert ist”?! Ich meine sicher, das funktioniert großartig, aber der Teil der “anmutigen Verschlechterung” ist nur Marketingtaktik. Ich hatte noch nicht einmal davon gehört, bis ich es fand diese Seite aus dem Jahr 2002. Richtig, die nur Google-Ergebnis auf der ersten Seite für “Css ist im Browser deaktiviert” ist aus vor 10 Jahren (oder 7, wenn man bedenkt, dass diese Antwort 2009 aufgestellt wurde).

– Vicky Chijwani

20. Januar 2013 um 18:31 Uhr

Nachzügler

ich denke du sollte Gehen Sie die Javascript-Route, oder zumindest würde ich:

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

schön, getestet und funktioniert einwandfrei. Aber bevor Sie so etwas versuchen, denken Sie daran, dass das Absenden des Formulars über Javascript nicht dazu führt, dass einige Browser das Passwort-Speichern anbieten.

– Andik

26. Januar 2009 um 11:35 Uhr
Dadurch wird die Schaltfläche zum Senden für einen Moment angezeigt (bis die Seite geladen und das JS ausgeführt wird).

– Nornagon

10. April 2011 um 7:34 Uhr
Ein Tastendruck wird auch für eine Auswahl aus der automatischen Vervollständigung ausgelöst, dh wenn der Benutzer eine E-Mail-Adresse eingibt und er/sie eine zuvor angegebene Adresse aus der automatischen Vervollständigung des Browsers auswählt, indem er die Eingabetaste drückt, wird Ihr Formular gesendet. Nicht das, was Ihre Benutzer erwarten.

– Cburger

11. März 2012 um 10:08 Uhr
Ich wechselte zu keydown von keypress für eine breitere Unterstützung, aber Sie müssen auch hinzufügen e.preventDefault(); Vor dem if wenn Sie hoffen, Chrome zu unterstützen.

– Campbeln

9. Februar 2015 um 2:54 Uhr
@Campbeln können Sie möglicherweise verwenden .on('keypress'...) stattdessen. Die Dokumente für .on() sieht aus wie es tut .preventDefault() Ein Anruf für dich.

– Jinglesthula

18. November 2016 um 22:09 Uhr

andyk

Hast du das versucht?

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

Da verstehen die meisten Browser visibility:hidden und es funktioniert nicht wirklich wie display:none, ich vermute aber, dass es in Ordnung sein sollte. Habe es selbst nicht wirklich getestet, also CMIIW.

Es gibt nur eine Sache visibility: hidden: wie Sie lesen können w3schools, Sichtbarkeit: keine wirkt sich immer noch auf das Layout aus. Wenn Sie diesen Leerraum vermeiden möchten, scheint mir die Lösung mit absoluter Positionierung besser zu sein.

– Loybert

28. September 2012 um 15:32 Uhr
Sie können beide Lösungen kombinieren: <input type="submit" style="visibility: hidden; position: absolute;" />

– VaclavSir

11. Dezember 2013 um 14:27 Uhr
Verdammt, das funktioniert nicht in IE8 (es sendet das Formular nicht), also gewinnt die Lösung von oben: position: absolute; left: -100px; width: 1px; height: 1px;

– VaclavSir

11. Dezember 2013 um 15:27 Uhr

Damoiser

Eine andere Lösung ohne den Submit-Button:

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;
    }
  });

});

Für alle, die sich diese Antwort in Zukunft ansehen, implementiert HTML5 ein neues Attribut für Formularelemente, hiddendie automatisch angewendet werden display:none zu deinem Element.

z.B

<input type="submit" hidden />

Während es mit Desktop-Chrome zu funktionieren scheint, scheint es mit Chrome oder Safari auf dem iPhone nicht zu funktionieren.

– Ulf Adams

21. August 2018 um 13:25 Uhr
@UlfAdams Es funktioniert mit Chrome und Safari auf dem iPhone 12.1.2.

– Matthäus Campbell

6. Februar 2019 um 16:59 Uhr
läuft leider noch nicht in Safari 14.2 (macOS)

– fabelhaft

2. März 2021 um 15:01 Uhr

Erik Funkenbusch

Verwenden Sie folgenden Code, dieser hat mein Problem in allen 3 Browsern (FF, IE und Chrome) behoben:

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

Fügen Sie die obige Zeile als erste Zeile in Ihrem Code mit dem entsprechenden Wert für Name und Wert hinzu.

Während es mit Desktop-Chrome zu funktionieren scheint, scheint es mit Chrome oder Safari auf dem iPhone nicht zu funktionieren.

– Ulf Adams

21. August 2018 um 13:25 Uhr
@UlfAdams Es funktioniert mit Chrome und Safari auf dem iPhone 12.1.2.

– Matthäus Campbell

6. Februar 2019 um 16:59 Uhr
läuft leider noch nicht in Safari 14.2 (macOS)

– fabelhaft

2. März 2021 um 15:01 Uhr

springnett

Setzen Sie einfach das versteckte Attribut auf true:

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

Das versteckte Attribut deaktiviert das Senden durch Drücken der Eingabetaste.

– 66 Tonnen99

23. September 2013 um 8:11 Uhr
@66Ton99 Einfach in FF testen. Es deaktiviert die Übermittlung nicht

– Eugen Konkow

10. Januar 2017 um 18:13 Uhr
“es funktioniert auf meinem rechner” 😉 es gibt viel mehr browser als firefox. Man kann sich wohl eine Lösung wünschen, die browserübergreifend zuverlässig funktioniert.

– Félix Adriyel Gagnon-Grenier

12. Juni 2017 um 20:40 Uhr
Funktioniert auf Chrome 63

– piotr_cz

19. Januar 2018 um 20:21 Uhr
Funktioniert derzeit nicht in Chrome oder Safari auf dem iPhone.

– Ulf Adams

21. August 2018 um 13:28 Uhr

9164100cookie-checkSenden eines Formulars durch Drücken der Eingabetaste ohne Senden-Schaltfläche

#einreichen #Formen #html