Como impedir que a tecla ENTER seja pressionada para enviar um formulário da web?

Como você evita que um ENTERpressionamento de tecla envie um formulário em um aplicativo baseado na Web?

[ revisão 2012, sem manipulador embutido, preservar área de texto ao manipular]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Agora você pode definir um manipulador de pressionamento de tecla no formulário:
<form [...] onkeypress = "return checkEnter (event)">

document.querySelector('form').onkeypress = checkEnter;

Aqui está um manipulador de jQuery que pode ser usado para parar de enviar envios e também para parar a tecla de retrocesso -> voltar. Os pares (keyCode: selectorString) no objeto "keyStop" são usados ​​para corresponder aos nós que não devem disparar sua ação padrão.

Lembre-se de que a web deve ser um local acessível, e isso está quebrando as expectativas dos usuários de teclado. Dito isto, no meu caso, o aplicativo da Web em que estou trabalhando não gosta do botão voltar, de modo que desativar o atalho de tecla é OK. A discussão "deve entrar -> enviar" é importante, mas não está relacionada à pergunta real.

Aqui está o código, você decide sobre acessibilidade e por que realmente deseja fazer isso!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

Simplesmente retorne false do manipulador de envio

<form onsubmit="return false;">

ou se você quiser um manipulador no meio

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

Você precisará chamar essa função, que cancelará o comportamento de envio padrão do formulário. Você pode anexá-lo a qualquer campo ou evento de entrada.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

A tecla ENTER apenas ativa o botão de envio padrão do formulário, que será o primeiro

<input type="submit" />

o navegador encontra no formulário.

Portanto, não tem um botão de envio, mas algo como

<input type="button" value="Submit" onclick="submitform()" /> 

EDIT : Em resposta à discussão nos comentários:

Isso não funciona se você tiver apenas um campo de texto - mas pode ser o comportamento desejado nesse caso.

A outra questão é que isso depende do Javascript para enviar o formulário. Isso pode ser um problema do ponto de vista da acessibilidade. Isso pode ser resolvido escrevendo o <input type='button'/>com javascript e, em seguida, coloque um <input type='submit' />dentro de uma <noscript>tag. A desvantagem dessa abordagem é que, para navegadores desativados em javascript, você terá envios de formulário em ENTER. Cabe ao OP decidir qual é o comportamento desejado nesse caso.

Não conheço nenhuma maneira de fazer isso sem chamar o javascript.

Em suma, a resposta em Javascript puro é:

<script type="text/javascript">
    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 desativa apenas a ação de pressionar a tecla "Enter" para o tipo de entrada = 'texto'. Os visitantes ainda podem usar a tecla "Enter" em todo o site.

Se você deseja desativar "Enter" para outras ações também, você pode adicionar console.log (e); para fins de teste, e pressione F12 no chrome, vá para a guia "console" e pressione "backspace" na página e olhe dentro dela para ver quais valores são retornados. Em seguida, você pode direcionar todos esses parâmetros para aprimorar ainda mais o código acima para atender às suas necessidades de "e.target.nodeName" , "e.target.type" e muito mais ...

Veja minha resposta detalhada para uma pergunta semelhante aqui

Todas as respostas que encontrei sobre esse assunto, aqui ou em outros posts, têm uma desvantagem e evitam o gatilho de alteração real no elemento do formulário. Portanto, se você executar essas soluções, o evento onchange também não será acionado. Para superar esse problema, modifiquei esses códigos e desenvolvi o código a seguir. Espero que isso se torne útil para os outros. Eu dei uma aula ao meu formulário "prevent_auto_submit" e adicionei o seguinte JavaScript:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

Eu sempre fiz isso com um manipulador de teclas como o anterior, mas hoje encontrei uma solução mais simples. A tecla Enter apenas aciona o primeiro botão de envio não desativado no formulário. Portanto, na verdade, tudo o que é necessário é interceptar esse botão tentando enviar:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

É isso aí. As teclas pressionadas serão tratadas como de costume pelo navegador / campos / etc. Se a lógica de envio e entrada for acionada, o navegador encontrará o botão de envio oculto e o acionará. E o manipulador de javascript impedirá o envio.

Passei algum tempo criando esse navegador para IE8,9,10, Opera 9+, Firefox 23, Safari (PC) e Safari (MAC)

Exemplo do JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

Código base - chame essa função via "onkeypress" anexado ao seu formulário e passe "window.event" para ele.

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

Em seguida, no seu formulário:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

No entanto, seria melhor se você não usasse JavaScript invasivo.

No meu caso, esse JavaScript jQuery resolveu o problema

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

Impedir que "ENTER" envie o formulário pode incomodar alguns de seus usuários. Portanto, seria melhor se você seguir o procedimento abaixo:

Escreva o evento 'onSubmit' em sua tag de formulário:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

escreva a função Javascript da seguinte maneira:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

Seja qual for o motivo, se você deseja impedir o envio do formulário ao pressionar a tecla Enter, é possível escrever a seguinte função em javascript:

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

obrigado.

Adicione esta tag ao seu formulário - onsubmit="return false;" você poderá enviar seu formulário apenas com alguma função JavaScript.

Para impedir o envio do formulário ao pressionar enterum campo textareaou input, verifique o evento de envio para descobrir que tipo de elemento enviou o evento.

Exemplo 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

Uma solução melhor é se você não tiver um botão de envio e disparar o evento com um botão normal. É melhor porque, no primeiro exemplo, 2 eventos de envio são disparados, mas no segundo exemplo, apenas 1 evento de envio é disparado.

Exemplo 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

Você achará isso mais simples e útil: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

E se:

<asp:Button ID="button" UseSubmitBehavior="false"/>

Por favor, verifique este artigo Como impedir que a tecla ENTER seja pressionada para enviar um formulário da web?

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

Você pode capturar a tecla pressionada em um formulário em javascript e impedir que borbulhe, acho. ENTER em uma página da Web basicamente envia o formulário em que o controle atualmente selecionado é colocado.

Este link fornece uma solução que funcionou para mim no Chrome, FF e IE9, além do emulador para o IE7 e 8 que vem com a ferramenta de desenvolvimento do IE9 (F12).

http://webcheatsheet.com/javascript/disable_enter_key.php

Outra abordagem é anexar o botão de entrada de envio ao formulário somente quando ele deve ser enviado e substituí-lo por uma div simples durante o preenchimento do formulário

Basta adicionar este atributo à sua tag FORM:

onsubmit="return gbCanSubmit;"

Em seguida, na sua tag SCRIPT, adicione este:

var gbCanSubmit = false;

Então, quando você pressiona um botão ou por qualquer outro motivo (como em uma função), você finalmente permite o envio, basta virar o booleano global e fazer uma chamada .submit (), semelhante a este exemplo:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

Eu já me deparei com isso porque tenho vários botões de envio com valores diferentes de 'nome', para que, quando enviados, façam coisas diferentes no mesmo arquivo php. O botão enter/ returnquebra isso, pois esses valores não são enviados. Então, eu estava pensando: o botão enter/ returnativa o primeiro botão de envio no formulário? Dessa forma, você pode ter um botão de envio 'baunilha' que está oculto ou tem um valor de 'nome' que retorna o arquivo php em execução de volta à página com o formulário. Ou então, um valor padrão (oculto) de 'nome' que a tecla pressionada ativa e os botões de envio sobrescrevem com seus próprios valores de 'nome'. Apenas um pensamento.

E se:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

E apenas nomeie seu botão à direita e ele ainda será enviado, mas os campos de texto, isto é, o explícitoOriginalTarget quando você clicar em retornar em um, não terão o nome correto.

Isso funcionou para mim.
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

Aqui está como eu faria isso:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

colocar em arquivo externo javascript

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

ou em algum lugar dentro da etiqueta corporal

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Eu tive o mesmo problema (formulários com muitos campos de texto e usuários não qualificados).

Eu resolvi desta maneira:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

usando isso no código HTML:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

Dessa maneira, a ENTERtecla funciona como planejado, mas ENTERé necessária uma confirmação ( geralmente um segundo toque).

Deixo para os leitores a busca de um script enviando o usuário no campo em que ele pressionou ENTERse ele decidir permanecer no formulário.