Nun, ich versuche, ein Formular zu senden, indem ich die Eingabetaste drücke, aber keine Schaltfläche zum Senden anzeige. Ich möchte nach Möglichkeit nicht in JavaScript einsteigen, da alles in allen Browsern funktionieren soll (die einzige mir bekannte JS-Methode sind Ereignisse).

Im Moment sieht das Formular folgendermaßen 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>

Welches funktioniert ziemlich gut. 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. Die Lösung gefällt mir jedoch immer noch nicht, da es schwierig ist zu wissen, ob sie auf allen Plattformen mit allen Browsern funktioniert.

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

Versuchen:

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

Dadurch wird der Knopf nach links aus dem Bildschirm gedrückt. Das Schöne daran ist, dass Sie eine angemessene Verschlechterung erhalten, wenn CSS deaktiviert ist.

Update - Problemumgehung für IE7

Wie von Bryan Downing + 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 denke, Sie sollten den Javascript-Weg 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>

Hast du das versucht?

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

Da die meisten Browser verstehen visibility:hiddenund es nicht wirklich so funktioniert display:none, denke ich, dass es in Ordnung sein sollte. Ich habe es nicht wirklich selbst getestet, also CMIIW.

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

});

Für alle, die sich diese Antwort in Zukunft ansehen, implementiert HTML5 ein neues Attribut für Formularelemente hidden, das automatisch angewendet wirddisplay:none auf Ihr Element angewendet wird.

z.B

<input type="submit" hidden />

Verwenden Sie folgenden Code, dies 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 Ihren Code mit dem entsprechenden Wert für Name und Wert ein.

Anstelle des Hacks, mit dem Sie die Schaltfläche derzeit ausblenden, ist es viel einfacher, visibility: collapse;das Stilattribut festzulegen. Ich würde jedoch weiterhin empfehlen, ein wenig einfaches Javascript zu verwenden, um das Formular einzureichen. Soweit ich weiß, ist die Unterstützung für solche Dinge heutzutage allgegenwärtig.

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>

Die eleganteste Art, dies zu tun, besteht darin, die Senden-Schaltfläche beizubehalten, aber den Rand, den Abstand und die Schriftgröße auf 0 zu setzen.

Dadurch werden die Schaltflächenabmessungen auf 0x0 gesetzt.

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

Sie können dies selbst versuchen. Wenn Sie einen Umriss für das Element festlegen, wird ein Punkt angezeigt, der den äußeren Rand darstellt, der das 0x0 px-Element "umgibt".

Keine Notwendigkeit für Sichtbarkeit: versteckt, aber wenn es Sie nachts schlafen lässt, können Sie das auch in die Mischung werfen.

JS Fiddle

Der IE erlaubt nicht das Drücken der EINGABETASTE zum Senden von Formularen, wenn die Schaltfläche zum Senden nicht sichtbar ist und das Formular mehr als ein Feld enthält. Geben Sie ihm das, was er will, indem Sie ein transparentes Bild mit 1 x 1 Pixel als Senden-Schaltfläche bereitstellen. Natürlich nimmt es ein Pixel des Layouts ein, aber schauen Sie, was Sie tun müssen, um es auszublenden.

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

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

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

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

Dies funktioniert gut und ist die expliziteste Version dessen, was Sie erreichen möchten.

Beachten Sie, dass es einen Unterschied zwischen display:noneund visibility:hiddenfür andere Formularelemente gibt.

HTML5-Lösung

<input type="submit" hidden />

der einfachste Weg

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

Für diejenigen, die Probleme mit dem Internet Explorer haben und auch für andere.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

Sie könnten auch dies versuchen

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

Sie können ein Bild mit der Breite / Höhe = 0 px einfügen

Ich arbeite mit einer Reihe von UI-Frameworks. Viele von ihnen haben eine integrierte Klasse, mit der Sie Dinge visuell verbergen können.

Bootstrap

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

Winkelmaterial

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

Brillante Köpfe, die diese Frameworks erstellt 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;
}

Ich habe es einer Funktion auf Dokument fertig hinzugefügt. Wenn das Formular keine Schaltfläche zum Senden enthält (alle meine Jquery-Dialogformulare haben keine Schaltflächen zum Senden), fügen Sie es 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);
    });
}

input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

Ich habe verwendet:

<input class="hidden" type="submit" value="" 
onclick="document.getElementById('loginform').submit();"/>

und:

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

in der CSS-Datei. Es hat auch für mich magisch funktioniert. :) :)