Enviar un formulario presionando Intro sin un botón de enviar
Bueno, estoy intentando enviar un formulario presionando Intro pero no muestro el botón de enviar. Si es posible, no quiero entrar en JavaScript, ya que quiero que todo funcione en todos los navegadores (la única forma de JS que conozco es con eventos).
En este momento el formulario se ve así:
<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>
Lo cual funciona bastante bien. El botón de envío funciona cuando el usuario presiona Intro y no se muestra en Firefox, IE, Safari, Opera y Chrome. Sin embargo, todavía no me gusta la solución ya que es difícil saber si funcionará en todas las plataformas con todos los navegadores.
¿Alguien puede sugerir un método mejor? ¿O es esto tan bueno como parece?
Jan 25
'09 20:01
Actualización 2022: use esto en su lugar
<input type="submit" hidden />
| Aviso: respuesta desactualizada |
|---|
No lo utilice position: absoluteen el año 2021+. Se recomienda utilizar el hiddenatributo en su lugar. De lo contrario, mire hacia abajo y elija una respuesta mejor y más moderna. |
Intentar:
<input type="submit" style="position: absolute; left: -9999px"/>
Eso empujará el botón hacia la izquierda, fuera de la pantalla. Lo bueno de esto es que obtendrás una degradación elegante cuando CSS esté deshabilitado.
Actualización: solución alternativa para IE7
Como lo sugiere Bryan Downing + para tabindexevitar que la pestaña llegue a este botón (por Ates Goral):
<input type="submit"
style="position: absolute; left: -9999px; width: 1px; height: 1px;"
tabindex="-1" />
Creo que deberías seguir la ruta de Javascript, o al menos yo lo haría:
<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>
¿Has probado esto?
<input type="submit" style="visibility: hidden;" />
Dado que la mayoría de los navegadores lo entienden visibility:hiddeny en realidad no funciona como display:none, supongo que debería estar bien. Realmente no lo he probado yo mismo, así que CMIIW.
Otra solución sin el botón de enviar:
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;
}
});
});
