Impedir que os usuários enviem um formulário pressionando Enter

Tenho uma pesquisa em um site e parece haver alguns problemas com os usuários pressionando enter (não sei por que) e enviando acidentalmente a pesquisa (formulário) sem clicar no botão enviar. Há uma maneira de prevenir isto?

Estou usando HTML, PHP 5.2.9 e jQuery na pesquisa.

Você pode usar um método como

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

Ao ler os comentários na postagem original, torne-a mais utilizável e permita que as pessoas pressionem Enterse tiverem preenchido todos os campos:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

Não permitir a tecla enter em qualquer lugar

Se você não tiver um <textarea>no seu formulário, adicione o seguinte ao seu <form>:

<form ... onkeydown="return event.key != 'Enter';">

Ou com jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Isso fará com que todas as teclas pressionadas dentro do formulário sejam verificadas no key. Caso contrário Enter, ele retornará truee tudo continuará como de costume. Se for Enter, retornará falsee tudo será interrompido imediatamente, para que o formulário não seja enviado.

O keydownevento é preferido, keyuppois keyupé muito tarde para bloquear o envio do formulário. Historicamente, havia também o keypress, mas isso é preterido, assim como o KeyboardEvent.keyCode. Você deve usar o KeyboardEvent.keyque retorna o nome da tecla que está sendo pressionada. Quando Enterestá marcado, isso verifica 13 (entrada normal) e 108 (entrada do teclado numérico).

Observe que, $(window)conforme sugerido em algumas outras respostas, em vez de $(document)não funcionar para keydown/ keyupno IE <= 8, não é uma boa opção se você também deseja cobrir esses usuários pobres.

Permitir tecla enter apenas em áreas de texto

Se você tiver um <textarea>no seu formulário (que obviamente deve aceitar a tecla Enter), adicione o manipulador de teclas a cada elemento de entrada individual que não seja a <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Para reduzir o boilerplate, é melhor fazer isso com o jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Se você tiver outras funções de manipulador de eventos anexadas a esses elementos de entrada, que também gostaria de chamar na tecla enter por algum motivo, evite apenas o comportamento padrão do evento em vez de retornar false, para que possa propagar adequadamente para outros manipuladores.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Permitir inserir tecla nas áreas de texto e enviar apenas os botões

Se você também deseja permitir a tecla Enter nos botões de envio <input|button type="submit">, sempre pode refinar o seletor como abaixo.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

Observe que, input[type=text]conforme sugerido em algumas outras respostas, não abrange as entradas que não são de texto em HTML5, portanto, esse não é um bom seletor.

Seção 4.10.22.2 O envio implícito da especificação HTML5 do W3C diz:

O botão padrão de um formelemento é o primeiro botão de envio em ordem de árvore cujo proprietário do formulário é esse elemento.form

Se o agente do usuário oferecer suporte para permitir que o usuário envie um formulário implicitamente (por exemplo, em algumas plataformas, pressione a tecla "enter" enquanto um campo de texto estiver focado no envio implicitamente do formulário), faça isso para um formulário cujo botão padrão tenha uma ativação definida o comportamento deve fazer com que o agente do usuário execute etapas de ativação de clique sintético nesse botão padrão .

Nota: Consequentemente, se o botão padrão estiver desativado, o formulário não será enviado quando um mecanismo implícito de envio for usado. (Um botão não tem comportamento de ativação quando desativado.)

Portanto, uma maneira compatível com os padrões de desativar qualquer envio implícito do formulário é colocar um botão de envio desativado como o primeiro botão de envio no formulário:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Um bom recurso dessa abordagem é que ela funciona sem JavaScript ; esteja o JavaScript ativado ou não, é necessário um navegador da Web em conformidade com os padrões para impedir o envio implícito de formulário.

Eu tive que capturar todos os três eventos relacionados ao pressionamento de teclas para impedir que o formulário fosse enviado:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Você pode combinar tudo isso em uma boa versão compacta:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Se você usar um script para fazer o envio real, poderá adicionar a linha "return false" ao manipulador onsubmit como este:

<form onsubmit="return false;">

Chamar submit () no formulário a partir do JavaScript não acionará o evento.

Usar:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Essa solução funciona em todos os formulários de um site (também nos formulários inseridos com o Ajax), impedindo apenas Enters nos textos de entrada. Coloque-o em uma função pronta para documento e esqueça esse problema por toda a vida.

Em vez de impedir que os usuários pressionem Enter, o que pode parecer antinatural, você pode deixar o formulário como está e adicionar uma validação extra no lado do cliente: Quando a pesquisa não termina, o resultado não é enviado ao servidor e o usuário recebe uma boa mensagem informando o que precisa ser concluído para preencher o formulário. Se você estiver usando jQuery, tente o plug-in Validação:

http://docs.jquery.com/Plugins/Validation

Isso exigirá mais trabalho do que pegar o Enterbotão, mas certamente proporcionará uma experiência mais rica ao usuário.

Uma boa e simples solução jQuery:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Ainda não posso comentar, por isso vou postar uma nova resposta

A resposta aceita está correta, mas não para de enviar no teclado numérico. Pelo menos na versão atual do Chrome. Eu tive que alterar a condição do código de chave para isso, então funciona.

if(event.keyCode == 13 || event.keyCode == 169) {...}

É a minha solução para atingir a meta, é limpa e eficaz.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Uma abordagem completamente diferente:

1. O primeiro <button type="submit">no formulário será ativado ao pressionar Enter.
2. Isso é verdade mesmo se o botão estiver oculto com style="display:none;
3. O script para esse botão pode retornar false, o que interrompe o processo de envio.
4. Você ainda pode ter outro <button type=submit>para enviar o formulário. Basta retornar truepara fazer a cascata da submissão.
5. Pressionar Enterenquanto o botão de envio real estiver focado ativará o botão de envio real.
6. Pressionar Enterdentro <textarea>ou outros controles de formulário se comportará normalmente.
7. Pressionar Enterdentro dos <input>controles do formulário acionará o primeiro <button type=submit>, que retorna falsee, portanto, nada acontece.

Portanto:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Dando ao formulário uma ação de 'javascript: void (0);' parece fazer o truque

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Não colocar um botão de envio poderia funcionar. Basta colocar um script na entrada (type = button) ou adicionar eventListener se desejar enviar os dados no formulário.

Em vez disso, use isso

<input type="button">

do que usar isso

<input type="submit">

1. Não use type = "submit" para entradas ou botões.
2. Use type = "button" e use js [Jquery / angular / etc] para enviar o formulário ao servidor.

Eu precisava impedir que apenas entradas específicas fossem enviadas, então usei um seletor de classe, para permitir que esse seja um recurso "global" onde eu precisar.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

E este código jQuery:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Como alternativa, se o pressionamento de tecla for insuficiente:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Algumas notas:

Modificando várias boas respostas aqui, a Enterchave parece funcionar keydownem todos os navegadores. Para a alternativa, eu atualizei bind()para o on()método

Sou um grande fã de seletores de classe, avaliando todos os prós e contras e discussões sobre desempenho. Minha convenção de nomenclatura é 'idSomething' para indicar que o jQuery está usando-o como um ID, para separá-lo do estilo CSS.

Você pode criar um método JavaScript para verificar se a Entertecla foi pressionada e, se for, para interromper o envio.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Basta chamar isso no método de envio.

SOMENTE ENVIAR EM BLOCO, mas não outra funcionalidade importante da tecla enter, como criar um novo parágrafo em <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Esta é a maneira perfeita. Você não será redirecionado da sua página

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

Eu tive um problema semelhante, onde eu tinha uma grade com "campos de texto ajax" (Yii CGridView) e apenas um botão de envio. Toda vez que eu fazia uma pesquisa em um campo de texto e pressione Enter, digite o formulário enviado. Eu tive que fazer algo com o botão porque era o único botão comum entre as visualizações (padrão MVC). Tudo o que eu precisava fazer era remover type="submit"e colocaronclick="document.forms[0].submit()

Eu acho que está bem coberto com todas as respostas, mas se você estiver usando um botão com algum código de validação JavaScript, poderá definir o onkeypress do formulário para Enter para chamar seu envio conforme o esperado:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

O onkeypress JS pode ser o que você precisa fazer. Não há necessidade de uma mudança global maior. Isso é especialmente verdadeiro se você não é o único que codifica o aplicativo do zero e foi levado para consertar o site de outra pessoa sem rasgá-lo e testá-lo novamente.

Já existem muitas boas respostas, só quero contribuir com algo da perspectiva do UX. Os controles do teclado nos formulários são muito importantes.

A questão é como desativar o envio ao pressionar teclas Enter. Não é como ignorar Enterem um aplicativo inteiro. Portanto, considere anexar o manipulador a um elemento do formulário, não à janela.

A desativação Enterpara envio de formulários ainda deve permitir o seguinte:

1. Envio de formulário via Enterquando o botão Enviar está focado.
2. Envio de formulário quando todos os campos estiverem preenchidos.
3. Interação com botões de não envio via Enter.

Este é apenas um padrão, mas segue as três condições.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Algo que eu não vi respondido aqui: quando você percorre os elementos da página, pressionar Enterao chegar no botão enviar acionará o manipulador de envio no formulário, mas gravará o evento como um MouseEvent. Aqui está minha pequena solução para cobrir a maioria das bases:

Esta não é uma resposta relacionada ao jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

Javascript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Para encontrar um exemplo de trabalho: https://jsfiddle.net/nemesarial/6rhogva2/

No meu caso específico, eu tive que parar o ENTER de enviar o formulário e também simular o clique do botão enviar. Isso ocorre porque o botão enviar tinha um manipulador de cliques, porque estávamos dentro de uma janela modal (código antigo herdado). De qualquer forma, aqui estão as minhas soluções combinadas para este caso.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Este caso de uso é especificamente útil para pessoas que trabalham com o IE8.

Isso funciona para mim

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Gostaria de adicionar um pouco de código CoffeeScript (não testado em campo):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Espero que você goste do truque legal da cláusula salvo.)

Usando Javascript (sem verificar nenhum campo de entrada):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

Se alguém quiser aplicar isso em campos específicos, por exemplo, digite o texto do texto:

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
            e.preventDefault();
            return false;
        }
    }
}, true);
</script>

Isso funciona bem no meu caso.

Vá para o seu css e acrescentar que para ele, então vai bloquear automaticamente a apresentação de seu formular contanto que você tem submeter entrada se você não quer, você pode excluí-lo ou tipo activatee deactivate, em vez

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Você também pode usar javascript:void(0)para impedir o envio de formulários.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

Isso funcionou para mim em todos os navegadores após muita frustração com outras soluções. A função externa name_space é apenas para evitar declarar globais, algo que eu também recomendo.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Uso da amostra:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Usar:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>