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

<input type="submit" style="display:none;"/>

Das funktioniert gut und ist die eindeutigste Version dessen, was Sie zu erreichen versuchen.

Beachten Sie, dass es einen Unterschied gibt zwischen display:none y visibility:hidden für andere Formularelemente.

Answer 2

Der IE lässt nicht zu, dass die ENTER-Taste gedrückt wird, um ein Formular abzuschicken, wenn die Schaltfläche zum Abschicken nicht sichtbar ist und das Formular mehr als ein Feld enthält. Geben Sie dem IE, was er will, indem Sie ein transparentes 1x1-Pixel-Bild als Übermittlungsschaltfläche bereitstellen. Natürlich nimmt es ein Pixel des Layouts ein, aber schauen Sie, was Sie tun müssen, um es zu verbergen.

<input type="image" src="img/1x1trans.gif"/>

Answer 3

Ich arbeite mit einer Reihe von UI-Frameworks. Viele von ihnen haben eine eingebaute Klasse, mit der man Dinge visuell ausblenden kann.

Bootstrap

<input type="submit" class="sr-only" tabindex="-1">

Eckiges Material

<input type="submit" class="cdk-visually-hidden" tabindex="-1">

Die klugen Köpfe, die diese Rahmen geschaffen haben, haben diese Stile wie folgt definiert:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

Answer 4

Der einfachste Weg

<input type="submit" style="width:0px; height:0px; opacity:0;"/>

Answer 5

Dies ist meine Lösung, getestet in Chrome, Firefox 6 und IE7+:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}