Das Einreichen eines Formulars durch Drücken der Eingabetaste ohne Absenden-Button
https://stackoverflow.com/questions/477691
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Nun Ich versuche, ein Formular abzuschicken mit enter aber nicht eine Submit-Button angezeigt wird. Ich will nicht in JavaScript erhalten, wenn möglich, da ich alles will auf allen Browsern funktioniert (die einzige JS Art, wie ich weiß, ist, mit Ereignissen).
Im Moment ist die Form sieht 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 ist ziemlich gut funktioniert. Die Schaltfläche Arbeiten einreichen, wenn der Benutzer die Eingabetaste drückt, und die Taste zeigt nicht in Firefox, IE, Safari, Opera und Chrome. Allerdings habe ich immer noch nicht die Lösung gefällt, da es schwer zu wissen, ob es auf allen Plattformen mit allen Browsern funktionieren.
Kann mir jemand eine bessere Methode vorschlagen? Oder ist das etwa so gut wie es geht?
Lösung
Versuchen:
<input type="submit" style="position: absolute; left: -9999px"/>
Das wird die Taste waaay nach links schieben, aus dem Bildschirm. Die nette Sache dabei ist, dann würden Sie Graceful Degradation erhalten, wenn CSS deaktiviert ist.
Update - Abhilfe für IE7
Wie vorgeschlagen von Bryan Downing + mit tabindex zu verhindern Tab diese Schaltfläche erreichen (von Ates Goral):
<input type="submit"
style="position: absolute; left: -9999px; width: 1px; height: 1px;"
tabindex="-1" />
Andere Tipps
Ich glaube, Sie sollte gehen 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>
Haben Sie versucht das?
<input type="submit" style="visibility: hidden;" />
Da die meisten Browser visibility:hidden verstehen und es funktioniert nicht wirklich, wie display:none, vermute ich, dass es in Ordnung sein sollte, though. Haben Sie nicht wirklich es selbst getestet, so CMIIW.
Eine andere Lösung ohne die 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 in dieser Antwort in Zukunft suchen, HTML5 implementiert ein neues Attribut für Formularelemente, hidden, die automatisch display:none zu Ihrem Element angewendet werden.
z.
<input type="submit" hidden />
Verwenden Sie folgenden Code, dies behoben mein Problem in allen drei Browsern (FF, IE und Chrome):
<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 oben Zeile als erste Zeile im Code mit dem entsprechenden Wert von Namen und Wert.
Statt des Hack Sie derzeit mit der Taste verstecken, wäre es viel einfacher sein visibility: collapse; im Stil-Attribut gesetzt. Allerdings würde ich noch empfehlen, ein wenig einfachen Javascript mit dem Formular einzureichen. Soweit ich verstehe, Unterstützung für solche Dinge ist heutzutage allgegenwärtig.
Nur das versteckte Attribut auf true gesetzt:
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" hidden="true" />
</form>
Der eleganteste Weg, dies zu tun, ist die Absende-Button zu halten, aber es ist festgelegt Grenze, Polsterung und font-size auf 0
Damit wird die Schaltfläche Dimensionen 0x0 machen.
<input type="submit" style="border:0; padding:0; font-size:0">
Sie können versuchen, diese selbst, und durch einen Umriss auf das Element Einstellung erhalten Sie einen Punkt sehen, die die Außengrenze „rund um“ das 0x0 Pixel-Element ist.
Keine Notwendigkeit für Sichtbarkeit. Versteckt, aber wenn es Sie schlafen in der Nacht macht, können Sie das in der Mischung als auch werfen
IE erlaubt es nicht, die für Formularübermittlung ENTER-Taste drücken, wenn die Submit-Button nicht sichtbar ist, und die Form hat mehr als ein Feld. Geben Sie ihm, was er will ein 1x1-Pixel-transparentes Bild als Submit-Button, indem. Natürlich wird es ein Pixel des Layouts übernehmen, aber schauen Sie, was Sie es zu tun haben, zu verbergen.
<input type="image" src="img/1x1trans.gif"/>
Das ist meine Lösung, getestet in Chrome, Firefox 6 und IE7 +:
.hidden{
height: 1px;
width: 1px;
position: absolute;
z-index: -100;
}
die einfachste Art und Weise
<input type="submit" style="width:0px; height:0px; opacity:0;"/>
Für diejenigen, die Probleme mit IE und für andere haben auch.
{
float: left;
width: 1px;
height: 1px;
background-color: transparent;
border: none;
}
Sie könnten auch versuchen, diese
<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">
Sie können ein Bild mit einer Breite / Höhe = 0 px umfassen
<input type="submit" style="display:none;"/>
Das funktioniert gut, und es ist die explizite Version von dem, was Sie erreichen wollen.
Beachten Sie, dass es einen Unterschied gibt zwischen display:none und visibility:hidden für andere Formularelemente.
HTML5 Lösung
<input type="submit" hidden />
Ich habe es zu einer Funktion auf dem Dokument bereit. Wenn es keine Taste auf dem Formular wird (alle meine Jquery Dialog Formulare haben keine Tasten einreichen), anhängen.
$(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);
});
}
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 funktionierte auch für mich magisch an. :)
