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

Verwenden Sie den folgenden Code, der mein Problem in allen 3 Browsern (FF, IE und Chrome) gelöst hat:

<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 Ihren Code ein, mit dem entsprechenden Wert von name und value.

Answer 2

Setzen Sie einfach das Attribut hidden 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>

Answer 3

Anstelle des Hacks, den Sie derzeit verwenden, um die Schaltfläche auszublenden, wäre es viel einfacher, die visibility: collapse; im Attribut style. Dennoch würde ich empfehlen, das Formular mit ein wenig einfachem Javascript zu übermitteln. Soweit ich weiß, ist die Unterstützung für solche Dinge heutzutage allgegenwärtig.

Answer 4

Am elegantesten ist es, den Submit-Button beizubehalten, aber den Rahmen, das Padding und die Schriftgröße auf 0 zu setzen.

Dadurch werden die Abmessungen der Schaltfläche 0x0.

<input type="submit" style="border:0; padding:0; font-size:0">

Sie können dies selbst ausprobieren. Wenn Sie dem Element einen Umriss zuweisen, sehen Sie einen Punkt, der die äußere Umrandung des 0x0 px-Elements darstellt.

Die Sichtbarkeit muss nicht versteckt sein, aber wenn Sie dadurch nachts besser schlafen können, können Sie auch das in den Mix werfen.

JS-Fiedel

Answer 5

HTML5-Lösung

<input type="submit" hidden />