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?

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" />

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>

¿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.

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

});

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 />

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

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 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

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

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

Solución HTML5

<input type="submit" hidden />

la forma mas sencilla

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

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

{
    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">

Puede incluir una imagen con ancho / alto = 0 px

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

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

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

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