Enviando um formulário pressionando enter sem um botão de envio


322

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?


7
Um pequeno ponto que pode raspar alguns caracteres do seu CSS e normalmente será feito automaticamente é um minificador - você não precisa de unidades para medições de comprimento zero. 0px = 0pt = 0em = 0em etc.
pwdst

@pwdst obrigado por apontar isso - eu sou do mundo Python, então "explícito é melhor que implícito", e realmente me pergunto se esse é o caso no CSS, ou os criadores de CSS têm um idioma diferente?
Ericmjl 03/08/19

2
Zero é a exceção à regra aqui @ericmjl - 0px == 0em == 0% == 0vh == 0vh etc. Em outras medições de comprimento (diferentes de zero), não é apenas uma prática ruim, mas contra os padrões não especificar unidades e você verá comportamentos diferentes nos agentes do usuário (navegadores). Veja developer.mozilla.org/en-US/docs/Web/CSS/length e drafts.csswg.org/css-values-3/#lengths
pwdst

2
Em caso de dúvida, coloque uma unidade de comprimento explícito em outras palavras.
pwdst

3
Embora certamente não faça mal adicionar a unidade com 0, não ter nenhum deve ser 100% válido, independentemente da linguagem, na verdade, desde as abstrações matemáticas. OTOH, um uso útil de ter vs. não tê-los é transmitir a mensagem de que a propriedade especificada é "realmente destinada a ser 0 e permanecer assim" (sem unidade) vs. "essa coisa passa a ser zero agora, mas pode ser ajustado ao gosto; ou o que for ... "(com a unidade).
Sz.

Respostas:


237

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

9
Apenas tentei esta solução no IE7 com o mesmo resultado que o Erebus. O código a seguir o corrige:position: absolute; width: 1px; height: 1px; left: -9999px;
Bryan Downing

84
? O que um hack horrível :( por isso que é HTML como esta em primeiro lugar Existe uma boa razão para entrar não trabalho neste caso?
nornagon

28
@ornorn: Se você acha que esse hack é horrível, fique à vontade para sugerir um menos horrível. HTML é o que é ...
Ates Goral

13
@MooseFactorytabindex="-1"
Ates Goral

14
"o legal é ... degradação graciosa quando o CSS está desativado" ?! Quero dizer, claro, isso funciona muito bem, mas a parte da "degradação graciosa" é apenas tática de marketing. Eu nem tinha ouvido falar até encontrar essa página a partir do ano 2002 . É isso mesmo, o único resultado do Google na primeira página para "css está desativado no navegador" é de 10 anos atrás (ou 7, considerando que essa resposta foi apresentada em 2009).
Vicky Chijwani

97

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>

6
agradável, testado e funcionando bem. Mas antes de tentar algo assim, lembre-se de que o envio de um formulário via Javascript não fará com que alguns navegadores ofereçam o material para salvar senhas.
Andyk

3
Isso fará com que o botão enviar apareça por um momento (até a página carregar e o JS ser executado).
Nornagon

15
Um pressionamento de tecla também é acionado para uma seleção do preenchimento automático, ou seja, se o usuário estiver inserindo um endereço de email e ele selecionar um dado anteriormente no preenchimento automático do navegador pressionando enter, o formulário será enviado. Não é o que seus usuários esperam.
cburgmer

2
Eu mudei para keydownde keypresspara obter suporte mais amplo, mas você também precisa adicionar e.preventDefault();antes ifse desejar dar suporte ao Chrome.
Campbeln

1
@ Campbeln você pode usar em seu .on('keypress'...)lugar. Os documentos para .on()parecerem .preventDefault()adequados para você.
Jinglesthula

79

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.


3
há apenas uma coisa visibility: hidden: como você pode ler em w3schools , visibity: nenhum ainda afeta o layout. Se você deseja evitar esse espaço em branco, a solução com posicionamento absoluto parece ser melhor para mim.
Loybert 28/09/12

8
Você pode combinar as duas soluções:<input type="submit" style="visibility: hidden; position: absolute;" />
VaclavSir 11/13/13

2
Droga, isso não funciona no IE8 (não enviar o formulário), para que a solução de vitórias acima:position: absolute; left: -100px; width: 1px; height: 1px;
VaclavSir

31

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

});

1
Truque estranho. Que você transforma seu botão em uma caixa de texto! Mas como o truque funciona para todos os navegadores, eu creditei você!
Jenna Leaf

thanks @JennaLeaf ;-) De qualquer forma, acho que não é tão estranho - muitos formulários online são usados ​​para enviar o "gatilho" simplesmente do pressionamento de tecla. Um exemplo pode ser a barra de pesquisa do Google (talvez eles não usem exatamente esse código, mas provavelmente algo semelhante).
Damoiser 17/05

16

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

Embora pareça funcionar com o Chrome da área de trabalho, parece não funcionar com o Chrome ou o Safari no iPhone.
Ulf Adams

@UlfAdams Funciona com o Chrome e o Safari no iPhone 12.1.2.
Matthew Campbell

13

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.


7

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.


7

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>

4
O atributo oculto desativará o envio pressionando enter.
precisa saber é o seguinte

@ 66Ton99 Basta testar em FF. Ele não desabilita a submissão
Eugen Konkov

1
"funciona na minha máquina";) há muito mais navegadores que o firefox. pode-se, sem dúvida, querer uma solução que funcione de maneira confiável entre navegadores.
Félix Gagnon-Grenier

Funciona no Chrome 63
piotr_cz 19/01/19

No momento, não funciona no Chrome ou Safari no iPhone.
Ulf Adams

7

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


5

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

4

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

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

Parece que o IE8 não gosta de posição: absoluto, não envia.
Maxxime #

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


4

Solução HTML5

<input type="submit" hidden />

O mesmo que acima - não funciona com o Chrome ou Safari no iPhone.
Ulf Adams


2

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

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

Eu ainda usaria position: absolute, float afeta o layout.
SuperDuck # 30/14

Parece que o IE8 não gosta de posição: absoluto, ele não envia. Eu uso:
maxxyme

O mesmo para float: left;, quando removido, ele envia.
maxxyme

2

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


1
IMPORTANTE: você DEVE usar um URL de imagem válido ou o Firefox exibirá o texto "Enviar consulta" na sua página
PH.

2
Se você adicionar uma imagem existente e definir altura e largura como zero, ou adicionar uma imagem inexistente, o navegador precisará fazer uma solicitação GET desperdiçada para o recurso.
Pwdst

2

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

1

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

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

-2

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.