Enviar un formulario presionando enter sin un botón de enviar

322

Bueno, estoy tratando de enviar un formulario presionando enter 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>

Lo que funciona bastante bien. El botón Enviar funciona cuando el usuario presiona Intro, 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 mejor método? ¿O es esto tan bueno como se pone?

abatishchev
fuente
77
Pequeño punto que podría eliminar algunos caracteres de su CSS y, por lo general, se hará automáticamente como minificadores: no necesita unidades para mediciones de longitud cero. 0px = 0pt = 0em = 0em etc.
pwdst
@pwdst gracias por señalar esto: soy del mundo de Python, así que "explícito es mejor que implícito", y realmente me pregunto si este es el caso en CSS, ¿o los creadores de CSS tienen un idioma diferente?
ericmjl
2
El cero es la excepción a la regla aquí @ericmjl - 0px == 0em == 0% == 0vh == 0vh etc. En otras mediciones de longitud (no cero) no solo es una mala práctica, sino contra los estándares no especificar unidades y verá un comportamiento variable en los agentes de usuario (navegadores). Ver developer.mozilla.org/en-US/docs/Web/CSS/length and drafts.csswg.org/css-values-3/#lengths
pwdst
2
En caso de duda, ponga una unidad de longitud explícita en otras palabras.
pwdst
3
Si bien ciertamente no está de más agregar la unidad con 0, no tener ninguna debería ser 100% válido independientemente del idioma, de hecho, todo se remonta a abstracciones matemáticas. OTOH, un uso útil de tener frente a no tenerlos es transmitir el mensaje de si la propiedad dada es "realmente destinada a ser 0, y permanecer así" (sin unidad), frente a "esa cosa resulta ser cero ahora, pero podría ajustarse al gusto; o lo que sea ... "(con unidad).
Sz.

Respuestas:

237

Tratar:

<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

Según lo sugerido por Bryan Downing + con tabindexpara 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" />
Ates Goral
fuente
99
Acabo de probar esta solución en IE7 con el mismo resultado que Erebus. El siguiente código lo corrige:position: absolute; width: 1px; height: 1px; left: -9999px;
Bryan Downing
84
? Qué horrible truco :( qué es HTML como este en primer lugar ¿Hay una buena razón para entrar a no trabajar en este caso?
nornagon
28
@nornagon: Si cree que este truco es horrible, no dude en sugerir uno menos horrible. HTML es lo que es ...
Ates Goral
13
@MooseFactorytabindex="-1"
Ates Goral
14
"¿Lo bueno es ... degradación elegante cuando CSS está deshabilitado" ?! Es decir, esto funciona muy bien, pero la parte de "degradación elegante" es solo tácticas de marketing. Ni siquiera había oído hablar de él hasta que encontré esta página desde el año 2002 . Así es, el único resultado de Google en la primera página para "CSS está deshabilitado en el navegador" es de hace 10 años (o 7 considerando que esta respuesta se presentó en 2009).
Vicky Chijwani
97

Creo que deberías seguir la ruta Javascript, o al menos yo haría lo siguiente:

<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>
extraño
fuente
66
agradable, probado y funcionando bien. Pero antes de intentar algo como esto, recuerde que enviar un formulario a través de Javascript no hará que algunos navegadores ofrezcan la contraseña para guardar cosas.
andyk
3
Esto hará que el botón de envío aparezca por un momento (hasta que se cargue la página y se ejecute el JS).
nornagon
15
También se activa una pulsación de tecla para una selección de autocompletar, es decir, si el usuario está ingresando una dirección de correo electrónico y selecciona una previamente dada del autocompletado del navegador presionando enter, entonces su formulario se enviará. No es lo que sus usuarios esperarán.
cburgmer
2
Cambié a keydownpartir keypressde un apoyo más amplio, pero también hay que añadir e.preventDefault();antes de la ifsi la esperanza de apoyar Chrome.
Campbeln
1
@Campbeln puede utilizar .on('keypress'...)en su lugar. Los documentos para .on()parece que hace la .preventDefault()llamada por usted.
jinglesthula
79

¿Has probado esto?

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

Dado que la mayoría de los navegadores entienden visibility:hiddeny realmente no funciona display:none, supongo que debería estar bien. Realmente no lo he probado, así que CMIIW.

andyk
fuente
3
solo hay una cosa visibility: hidden: como puedes leer en w3schools , visibity: ninguno todavía afecta el diseño. Si desea evitar este espacio en blanco, la solución con posicionamiento absoluto parece ser mejor para mí.
loybert
8
Puede combinar ambas soluciones:<input type="submit" style="visibility: hidden; position: absolute;" />
VaclavSir
2
Maldición, esto no funciona en IE8 (no envía el formulario), por lo que la solución de arriba gana:position: absolute; left: -100px; width: 1px; height: 1px;
VaclavSir
31

Otra solución sin el botón 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;
    }
  });

});
damoiser
fuente
1
Truco raro. ¡Que conviertas tu botón en un cuadro de texto! Pero como el truco funciona para todos los navegadores, ¡te he acreditado!
Jenna Leaf
gracias @JennaLeaf ;-) De todos modos, creo que no es tan extraño: muchos formularios en línea se usan para enviar simplemente el "disparo" de la tecla. Un ejemplo podría ser la barra de búsqueda de google (quizás no usan exactamente este código, pero probablemente algo similar).
Damoiser
16

Para cualquiera que esté buscando esta respuesta en el futuro, HTML5 implementa un nuevo atributo para los elementos del formulario hidden, que se aplicará automáticamente display:nonea su elemento.

p.ej

<input type="submit" hidden />
Panomosh
fuente
Si bien parece funcionar con Chrome de escritorio, no parece funcionar con Chrome o Safari en iPhone.
Ulf Adams
@UlfAdams Funciona con Chrome y Safari en iPhone 12.1.2.
Matthew Campbell
13

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.

Mayank Gupta
fuente
7

En lugar del truco que usas actualmente para ocultar el botón, sería mucho más simple establecer visibility: collapse;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.

Noldorin
fuente
7

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>
jumpnett
fuente
44
El atributo oculto deshabilitará el envío presionando enter.
66Ton99
@ 66Ton99 Solo prueba en FF. No deshabilita el envío
Eugen Konkov
1
"funciona en mi máquina";) hay muchos más navegadores que Firefox. Podría decirse que se puede desear una solución que funcione de manera confiable entre navegadores.
Félix Gagnon-Grenier
Funciona en Chrome 63
piotr_cz
No funciona en Chrome o Safari en iPhone en este momento.
Ulf Adams
7

La forma más elegante de hacerlo es mantener el botón de envío, 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" al elemento 0x0 px.

Sin necesidad de visibilidad: oculto, pero si te hace dormir por la noche, también puedes incluirlo en la mezcla.

JS Fiddle

Waltur Buerk
fuente
5

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"/>
Winston Tamblyn
fuente
4

Esta es mi solución, probada en Chrome, Firefox 6 e IE7 +:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}
vjnrv
fuente
Parece que a IE8 no le gusta la posición: absoluta, no se envía.
maxxyme
4
<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:noney visibility:hiddenpara otros elementos de formulario.

Shammoo
fuente
4

Solución HTML5

<input type="submit" hidden />
Andrew Luca
fuente
Igual que el anterior, no funciona con Chrome o Safari en iPhone.
Ulf Adams
3

la forma mas sencilla

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

Para aquellos que tienen problemas con IE y para otros también.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}
Jekis
fuente
Todavía usaría position: absolute, float afecta el diseño.
SuperDuck
Parece que a IE8 no le gusta la posición: absoluta, no se envía. Yo uso:
maxxyme
Lo mismo para float: left;, cuando se elimina, se envía.
maxxyme
2

También puedes probar esto

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

Puede incluir una imagen con ancho / alto = 0 px

Waney
fuente
1
IMPORTANTE: DEBE utilizar una URL de imagen válida o Firefox mostrará un texto de "Enviar consulta" en su página
PH.
2
Si agrega una imagen que existe y establece la altura y el ancho en cero, o agrega una imagen inexistente, entonces el navegador tendrá que hacer una solicitud GET desperdiciada para el recurso.
pwdst
2

Trabajo con un montón de marcos de UI. Muchos de ellos tienen una clase integrada que puede usar para ocultar cosas visualmente.

Oreja

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

Material angular

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

Las mentes brillantes que crearon estos marcos han definido estos estilos de la siguiente manera:

.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;
}
Perro h
fuente
1

Lo agregué a una función en el 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);
    });
}
seePatCode
fuente
0
input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});
Marty
fuente
-2

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. :)

Mihai Savin
fuente