it-swarm.com.de

Senden eines Formulars durch Drücken der Eingabetaste ohne Senden

Nun, ich versuche, ein Formular zu senden, indem Sie die Eingabetaste drücken, aber keinen Senden-Button anzeigen. Ich möchte möglichst nicht in JavaScript einsteigen, da ich möchte, dass alles mit allen Browsern funktioniert (die einzige JS-Methode, die 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 in Firefox, IE, Safari, Opera und Chrome nicht angezeigt wird. Die Lösung gefällt mir jedoch immer noch nicht, da es schwer zu wissen ist, ob sie auf allen Plattformen mit allen Browsern funktioniert.

Kann jemand eine bessere Methode vorschlagen? Oder ist das ungefähr so ​​gut wie es nur geht?

287
PythonPower

Versuchen:

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

Dadurch wird die Taste nach links aus dem Bildschirm gedrückt. Das Schöne daran ist, dass Sie bei deaktivierter CSS-Funktion eine grausame Verschlechterung erfahren.

Update - Problemumgehung für IE7

Wie von Bryan Downing + mit tabindex vorgeschlagen, 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" />
222
Ates Goral

Ich denke du solltest die Javascript-Route gehen, 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>
91
strager

Hast du das probiert?

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

Da die meisten Browser visibility:hidden verstehen und nicht wirklich wie display:none funktionieren, vermute ich, dass dies in Ordnung sein sollte. Ich habe es nicht wirklich selbst getestet, so CMIIW.

75
andyk

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

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

});
27
damoiser

Für jeden, der diese Antwort in Zukunft betrachtet, implementiert HTML5 ein neues Attribut für hidden für Formularelemente, das automatisch display:none auf Ihr Element anwendet.

z.B.

<input type="submit" hidden />
13
Panomosh

Verwenden Sie folgenden Code, um dieses Problem in allen drei Browsern (FF, IE und Chrome) zu beheben:

<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 über Ihrem ersten Code als erste Zeile den entsprechenden Wert für Name und Wert ein.

13
Mayank Gupta

Anstelle des Hacks, den Sie derzeit verwenden, um die Schaltfläche auszublenden, wäre es viel einfacher, visibility: collapse; im style-Attribut festzulegen. Allerdings würde ich trotzdem empfehlen, etwas einfaches Javascript zu verwenden, um das Formular zu senden. Soweit ich weiß, ist die Unterstützung für solche Dinge heutzutage allgegenwärtig.

7
Noldorin

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

Am elegantesten ist es, den Submit-Button beizubehalten, aber den Rand, die Auffüllung und die Schriftgröße auf 0 zu setzen. 

Dadurch werden die Dimensionen der Schaltfläche auf 0x0 gesetzt.

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

Sie können dies selbst ausprobieren. Wenn Sie dem Element eine Umrandung zuweisen, wird ein Punkt angezeigt. Dies ist der äußere Rand, der das 0x0 px-Element umgibt.

Keine Notwendigkeit für Sichtbarkeit: versteckt, aber wenn Sie nachts schlafen, können Sie dies auch in die Mischung einfließen lassen.

JS Fiddle

6
Waltur Buerk

IE erlaubt das Drücken der EINGABETASTE für die Formularübermittlung nicht, wenn die Schaltfläche "Senden" nicht sichtbar ist und das Formular mehr als ein Feld enthält. Geben Sie ihm, was er möchte, indem Sie ein 1x1-Pixel-transparentes Bild als Schaltfläche zum Senden 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"/>
5
Winston Tamblyn

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

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

der einfachste Weg

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

Sie könnten auch dies versuchen

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

Sie könnten ein Bild mit width/height = 0 px einfügen

2
waney

Für diejenigen, die Probleme mit IE und für andere haben.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}
2
Jekis
<input type="submit" style="display:none;"/>

Dies funktioniert gut und ist die expliziteste Version dessen, was Sie erreichen wollen.

Beachten Sie, dass für andere Formularelemente ein Unterschied zwischen display:none und visibility:hidden besteht.

1
Shammoo

HTML5-Lösung

<input type="submit" hidden />
0
Andrew Luca

Ich habe es zu einer Funktion in document ready hinzugefügt. Wenn das Formular keine Schaltfläche zum Senden enthält (alle meine Jquery-Dialogformulare haben keine Schaltfläche zum Senden), fügen Sie sie hinzu.

$(document).ready(function (){
    addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
    var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}
0
seePatCode