Como enviar um formulário quando a tecla Enter é pressionada?

Alguém pode me dizer como enviar um formulário HTML quando a tecla Enter é pressionada e se não há botões no formulário? O botão de envio não está lá . Estou usando um div personalizado em vez disso.

IMO, esta é a resposta mais limpa:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

Melhor ainda, se você estiver usando javascript para enviar o formulário usando o div personalizado, você também deve usar javascript para criá-lo e para definir o estilo display: none no botão. Desta forma, os usuários com javascript desabilitado ainda verão o botão enviar e poderão clicar nele.

Foi observado que display: none fará com que o IE ignore a entrada. Eu criei um novo exemplo de JSFiddle que começa como um formulário padrão e usa o aprimoramento progressivo para ocultar o envio e criar o novo div. Usei o estilo CSS do StriplingWarrior .

Para enviar o formulário quando a tecla Enter for pressionada, crie uma função javascript ao longo dessas linhas.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

Em seguida, adicione o evento a qualquer escopo necessário, por exemplo, na tag div:

<div onKeyPress="return checkSubmit(event)"/>

Porém, este também é o comportamento padrão do Internet Explorer 7 (provavelmente versões anteriores também).

Tentei várias estratégias baseadas em javascript / jQuery, mas continuei tendo problemas. O último problema que surgiu envolveu o envio acidental quando o usuário usa a tecla enter para selecionar na lista de preenchimento automático integrada do navegador. Finalmente mudei para esta estratégia, que parece funcionar em todos os navegadores que minha empresa suporta:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Isso é semelhante à resposta atualmente aceita por Chris Marasti-Georg, mas ao evitar display: none, parece funcionar corretamente em todos os navegadores.

Atualizar

Eu editei o código acima para incluir um negativo, de tabindexmodo que não capture a tecla tab. Embora isso tecnicamente não seja validado no HTML 4, a especificação do HTML5 inclui linguagem para fazê-lo funcionar da maneira que a maioria dos navegadores já estava implementando de qualquer maneira.

Use a <button>tag. Do padrão W3C:

Os botões criados com o elemento BUTTON funcionam da mesma forma que os botões criados com o elemento INPUT, mas oferecem possibilidades de renderização mais ricas: o elemento BUTTON pode ter conteúdo. Por exemplo, um elemento BUTTON que contém uma imagem funciona como e pode ser semelhante a um elemento INPUT cujo tipo é definido como "imagem", mas o tipo de elemento BUTTON permite conteúdo.

Basicamente, há outra tag, <button>que não requer javascript , que também pode enviar um formulário. Ele pode ser estilizado na forma de uma <div>tag (incluindo <img />dentro da tag do botão). Os botões da <input />tag não são tão flexíveis.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Existem três tipos de configuração no <button>; eles mapeiam para os <input>tipos de botão.

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Padrões

• W3C wiki sobre <button>
• HTML5 <button>
• HTML4 <button>

Eu uso <button>tags comcss-sprites e um pouco de cssestilo para obter botões coloridos e funcionais. Observe que é possível escrever css para, por exemplo, <a class="button">links compartilhados para estilização com o <button>elemento.

Eu acredito que é isso que você quer.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

Cada vez que uma tecla é pressionada, a função enter () será chamada. Se a tecla pressionada corresponder à tecla Enter (13), sendform () será chamado e o primeiro formulário encontrado será enviado. Isso é apenas para Firefox e outros navegadores compatíveis com os padrões.

Se você achar este código útil, não deixe de votar em mim!

Aqui está como faço isso com jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Outro javascript não seria muito diferente. o problema é verificar o argumento de tecla "13", que é a tecla enter

Use o seguinte script.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

Para cada campo que deve enviar o formulário quando o usuário clicar em Enter, chame a função submitenter da seguinte maneira.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Eu uso este método:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

Basicamente, acabei de adicionar uma entrada invisível do tipo imagem (onde " spacer.gif " é um gif transparente 1x1).

Desta forma, posso enviar este formulário com o botão 'enviar' ou simplesmente pressionando enter no teclado.

Esse é o truque!

Por que você simplesmente não aplica os estilos de envio de div a um botão de envio? Tenho certeza de que há um javascript para isso, mas seria mais fácil.

Se você estiver usando asp.net, poderá usar o atributo defaultButton no formulário.

Acho que você deveria ter um botão de envio ou uma imagem de envio ... Você tem um motivo específico para usar um "div de envio"? Se você quiser apenas estilos personalizados, eu recomendo <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Estendendo as respostas, isso é o que funcionou para mim, talvez alguém ache útil.

Html

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Semelhante ao exemplo de Chris Marasti-Georg, em vez de usar javascript embutido. Essencialmente, adicione onkeypress aos campos com os quais deseja que a tecla Enter funcione. Este exemplo atua no campo de senha.

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Como os display: nonebotões e entradas não funcionam no Safari e no IE, descobri que a maneira mais fácil, sem exigir hacks extras de javascript , é simplesmente adicionar um posicionado absolutamente <button />ao formulário e colocá-lo longe da tela.

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

Isso funciona na versão atual de todos os principais navegadores em setembro de 2016.

Obviamente, é recomendado (e mais semanticamente correto) estilizar <button/>como desejado.

Usar o atributo "autofocus" funciona para dar foco de entrada ao botão por padrão. Na verdade, clicar em qualquer controle dentro do formulário também dá foco ao formulário, um requisito para que o formulário reaja ao RETORNO. Portanto, o "foco automático" faz isso por você, caso o usuário nunca tenha clicado em qualquer outro controle dentro do formulário.

Portanto, o "foco automático" faz a diferença crucial se o usuário nunca clicou em nenhum dos controles do formulário antes de clicar em RETORNAR.

Mas, mesmo assim, ainda há 2 condições a serem atendidas para que isso funcione sem JS:

a) você deve especificar uma página para ir (se deixada em branco, não funcionará). No meu exemplo, é hello.php

b) o controle deve ser visível. É possível que você o mova para fora da página para ocultá-lo, mas não pode usar display: none ou visibility: hidden. O que fiz foi usar o estilo embutido apenas para movê-lo para a esquerda em 200px. Fiz a altura 0px para que não ocupe espaço. Caso contrário, ele ainda pode interromper outros controles acima e abaixo. Ou você pode flutuar o elemento também.

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>