Enviar un formulario presionando enter sin un botón de enviar
https://stackoverflow.com/questions/477691
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Bueno, estoy tratando de enviar un formulario presionando Intro pero sin mostrar un botón de envío. No es posible ingresar a JavaScript si es posible, 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>
Que funciona bastante bien. El botón de enviar funciona cuando el usuario presiona enter, y el botón 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 tan bueno como se pone?
Solución
Prueba:
<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ía una degradación elegante cuando CSS esté deshabilitado.
Actualización - Solución para IE7
Como sugirió Bryan Downing + con tabindex para evitar que la pestaña alcance este botón (por Ates Goral):
<input type="submit"
style="position: absolute; left: -9999px; width: 1px; height: 1px;"
tabindex="-1" />
Otros consejos
Creo que deberías seguir la ruta Javascript, o al menos yo deberí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 entienden la visibilidad de : oculta y realmente no funciona como display: none , supongo que debería estar bien, sin embargo. Realmente no lo he probado, 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;
}
});
});
Para cualquiera que vea esta respuesta en el futuro, HTML5 implementa un nuevo atributo para los elementos del formulario, hidden , que aplicará automáticamente display: none a su elemento.
por ejemplo
<input type="submit" hidden />
Use el siguiente código, esto solucionó mi problema en los 3 navegadores (FF, IE y Chrome):
<input type="submit" name="update" value=" Apply "
style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
hidefocus="true" tabindex="-1"/>
Agregue la línea anterior como primera línea en su código con el valor apropiado de nombre y valor.
En lugar del truco que usa actualmente para ocultar el botón, sería mucho más simple establecer visibilidad: colapso; en el atributo de estilo. Sin embargo, todavía recomendaría usar un poco de Javascript simple para enviar el formulario. Hasta donde yo entiendo, el apoyo para tales cosas es omnipresente hoy en día.
Simplemente establezca el atributo oculto en verdadero:
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" hidden="true" />
</form>
La forma más elegante de hacer esto es mantener el botón de enviar, pero establecer su borde, relleno y tamaño de fuente en 0.
Esto hará que las dimensiones del botón sean 0x0.
<input type="submit" style="border:0; padding:0; font-size:0">
Puede intentarlo usted mismo, y al establecer un contorno en el elemento verá un punto, que es el borde exterior "que rodea". el elemento 0x0 px.
Sin necesidad de visibilidad: oculto, pero si te hace dormir por la noche, también puedes incluirlo en la mezcla.
IE no permite presionar la tecla ENTER para el envío del formulario si el botón de envío no está visible y el formulario tiene más de un campo. Dale lo que quiere al proporcionar una imagen transparente de 1x1 píxeles como botón de envío. Por supuesto, ocupará un píxel del diseño, pero mira lo que tienes que hacer para ocultarlo.
<input type="image" src="img/1x1trans.gif"/>
Esta es mi solución, probada en Chrome, Firefox 6 e IE7 +:
.hidden{
height: 1px;
width: 1px;
position: absolute;
z-index: -100;
}
la forma más sencilla
<input type="submit" style="width:0px; height:0px; opacity:0;"/>
Para aquellos que tienen problemas con IE y también para otros.
{
float: left;
width: 1px;
height: 1px;
background-color: transparent;
border: none;
}
También puedes probar esto
<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">
Podría incluir una imagen con ancho / alto = 0 px
<input type="submit" style="display:none;"/>
Esto funciona bien y es la versión más explícita de lo que está tratando de lograr.
Tenga en cuenta que existe una diferencia entre display: none y visibilidad: oculta para otros elementos de formulario.
Solución HTML5
<input type="submit" hidden />
Lo agregué a una función en documento listo. Si no hay un botón de envío en el formulario (todos mis Formularios de diálogo de Jquery no tienen botones de envío), agréguelo.
$(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);
});
}
He usado
< input class="hidden" type="submit" value=""
onclick="document.getElementById('loginform').submit()"; />
y
.hidden {
border:0;
padding:0;
font-size:0;
width: 0px;
height: 0px;
}
en el archivo .css. Funcionó mágicamente para mí también. :)
