Bem, estou tentando enviar um formulário pressionando enter, mas não exibindo um botão de envio. Não quero entrar no JavaScript, se possível, pois quero que tudo funcione em todos os navegadores (a única maneira de JS que conheço é nos eventos).

No momento, o formulário fica assim:

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

O que funciona muito bem. O botão enviar funciona quando o usuário pressiona enter e o botão não aparece no Firefox, IE, Safari, Opera e Chrome. No entanto, ainda não gosto da solução, pois é difícil saber se ela funcionará em todas as plataformas e em todos os navegadores.

Alguém pode sugerir um método melhor? Ou isso é tão bom quanto ele ganha?

Experimentar:

<input type="submit" style="position: absolute; left: -9999px"/>

Isso pressionará o botão waaay para a esquerda, fora da tela. O bom disso é que você obteria uma degradação suave quando o CSS estiver desativado.

Atualização - solução alternativa para o IE7

Conforme sugerido por Bryan Downing + with tabindexpara impedir que a guia atinja esse botão (de Ates Goral):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

Eu acho que você deve seguir a rota Javascript, ou pelo menos eu:

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

Você já tentou isso?

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

Como a maioria dos navegadores entende visibility:hiddene realmente não funciona display:none, acho que tudo deve estar bem. Realmente não testei, então CMIIW.

Outra solução sem o botão 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 quem olha para essa resposta no futuro, o HTML5 implementa um novo atributo para os elementos do formulário hidden, que será aplicado automaticamente display:noneao seu elemento.

por exemplo

<input type="submit" hidden />

Use o código a seguir, isso corrigiu meu problema nos três navegadores (FF, IE e Chrome):

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

Adicione a linha acima como uma primeira linha no seu código com o valor apropriado de nome e valor.

Em vez do hack que você usa atualmente para ocultar o botão, seria muito mais simples definir visibility: collapse;o atributo style. No entanto, eu ainda recomendaria o uso de um pouco de Javascript simples para enviar o formulário. Até onde eu entendo, o apoio a essas coisas é onipresente hoje em dia.

Basta definir o atributo oculto como true:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" hidden="true" />
</form>

A maneira mais elegante de fazer isso é manter o botão enviar, mas defina sua borda, preenchimento e tamanho da fonte como 0.

Isso fará com que as dimensões do botão sejam 0x0.

<input type="submit" style="border:0; padding:0; font-size:0">

Você pode tentar fazer isso sozinho e, definindo um contorno para o elemento, verá um ponto, que é a borda externa "circundando" o elemento 0x0 px.

Não há necessidade de visibilidade: oculto, mas se isso faz você dormir à noite, também pode misturar isso.

JS Fiddle

O IE não permite pressionar a tecla ENTER para enviar o formulário se o botão enviar não estiver visível e o formulário tiver mais de um campo. Dê o que deseja, fornecendo uma imagem transparente de 1 x 1 pixel como um botão de envio. É claro que ele ocupará um pixel do layout, mas veja o que você precisa fazer para ocultá-lo.

<input type="image" src="img/1x1trans.gif"/>

Esta é a minha solução, testada no Chrome, Firefox 6 e IE7 +:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}

<input type="submit" style="display:none;"/>

Isso funciona bem e é a versão mais explícita do que você está tentando alcançar.

Observe que há uma diferença entre display:nonee visibility:hiddenpara outros elementos do formulário.

Solução HTML5

<input type="submit" hidden />

a maneira mais simples

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

Para quem tem problemas com o IE e para outros também.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

Você pode tentar também isso

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

Você pode incluir uma imagem com largura / altura = 0 px

Eu trabalho com um monte de estruturas de interface do usuário. Muitos deles têm uma classe interna que você pode usar para ocultar visualmente as coisas.

Bootstrap

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

Material angular

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

Mentes brilhantes que criaram essas estruturas definiram esses estilos da seguinte maneira:

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

Eu adicionei a uma função no documento pronto. Se não houver botão de envio no formulário (todos os meus Formulários de Diálogo Jquery não possuem botões de envio), anexe-o.

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

Eu usei:

<input class="hidden" type="submit" value="" 
onclick="document.getElementById('loginform').submit();"/>

e:

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

no arquivo .css. Também funcionou magicamente para mim. :)