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

773

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.

DForck42
fonte
2
Não use marcas de formulário e fazer o pedido costume ajax :) Mas com certeza, você pode ir em frente com a chave-escuta e abordagem de prevenção, que é o que eu faria ..
jancha
Eu simplesmente não uso as tags de formulário porque prefiro processar formulários por meio de solicitações ajax de maneiras não convencionais (ou seja: enviar alguns campos quando o foco for descartado, etc.). Você também pode criar um ouvinte especial para capturar a tecla Enter e processá-la apenas se desejar.
Juan Juan

Respostas:

881

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;
    }
  });
});
Peter Mortensen
fonte
7
No momento, estou apenas procurando uma solução rápida e não tenho tempo para implementar itens de validação. Agradeço as respostas de todos, mas é com isso que vou abordar nesse meio tempo. obrigado.
DForck42 22/09 /
8
Esse método é unideal porque impede que o usuário envie o formulário pressionando enter enquanto estiver focado no botão enviar. A melhor solução seria a do BalusC abaixo, onde o enter é interrompido apenas enquanto ainda focado nas entradas do formulário.
Anson Kao
3
Já vi situações (Internet Explorer somente) onde você precisa se ligam a keydownna documentvez do windowpara que isso funcione.
MartinHN
8
Você pode querer adicionar && !$(document.activeElement).is('textarea')à condição ou então novas linhas dentro de uma área de texto são bloqueadas (pelo menos no IE).
Flash
1
Isso funciona para mim. Mas isso também impede a adição de linhas de quebra na área de texto.
César León
613

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.

BalusC
fonte
11
Este deve ser a resposta boa, uma vez que também lida com formulário, incluindo textarea e explicar melhor evento de propagação
foobar
6
":input:not(textarea):not([type=submit]):not(button)"se você estiver usando em <button>vez de<input type=submit>
Simon_Weaver 24/09
Isso impede que a tecla Enter funcione em qualquer entrada que não seja a área de texto. Não é uma boa solução
mate.gwozdz 2/17/17
Deveria haver dois pontos antes input?
Xfactorial 14/09
1
@YodaDaCoda: acordado e ajustado.
BalusC 27/03/19
110

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.

Daniel Trebbien
fonte
6
Errrr ... Isso é ouro maciço. Se isso realmente funcionar em vários navegadores, ele merece ir para o topo! Como tantas pessoas podem ter respondido com variações de pressionamento de tecla, pressionamento de tecla etc., mas perderam essa resposta baseada em padrões?
John Rees
4
Por um lado, é simples e evita todas as armadilhas sugeridas pelas respostas aceitas. Por outro lado, parece uma pequena exploração do padrão. Parabéns por incluir o atributo aria- *. Eu adoraria ouvir mais comentários sobre isso.
Solvitieg
2
Também funciona como <input type="submit" disabled style="display: none" aria-hidden="true" />e você pode reduzir o tamanho da sua página em alguns caracteres. :-P
gaefan 28/11
7
O IE 11 envia de qualquer maneira.
CamaroSS 5/03/19
2
O Safari é o novo IE.
twistedpixel
68

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(); }
    });
Atualização
fonte
7
Você pode encadear os últimos 3 seletores ou vincular vários eventos com um método como esse $("#search").bind('keypress keyup keydown',preventSubmit);
Moak
Porque em um formulário web ASP.NET tudo tem que ser aninhados em uma <form>tag, a tecla enter irá enviar o formulário ... Esta solução desativada a tecla enter e corrigiu o problema, porém, graças @ Dave! Ativei a tecla Enter para determinados campos por id.
11133 Ian Campbell
@Upgradingdave Como você pode escrever "log ()" em vez de "console.log ()"?
precisa saber é o seguinte
1
@radbyx ... boa captura, deve ser console.log, eu atualizei minha resposta.
Atualizandodave
Observe que keypress keyup keydownvocê aciona qualquer código na condição if duas vezes .
Kai Noack
56

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.

Tom Hubbard
fonte
Funciona para mim no Chrome, isso também desativará os botões de envio, o que é bom se você desejar acionar um evento onlick no próprio botão enviar. Dica do Ajax: adicione sua chamada de função antes do retorno e o usuário ainda poderá pressionar a tecla Enter sem enviar o formulário para a página.
Dennis Heiden
Trabalhou para mim no Chrome, IE-11 e Firefox e foi a solução mais simples de implementar. Desabilitar a tecla Enter em seções inteiras da página, como algumas respostas, parece extremo e propenso a erros.
Roberto
Obrigado. funcionou para mim.
LU
23

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.

Buzogany Laszlo
fonte
Eu acho que a resposta original e.whichfoi boa; não há necessidade de mudar para e.keyCode. Ambos retornam o valor 13 para a tecla enter. Consulte stackoverflow.com/a/4471635/292060 e stackoverflow.com/a/18184976/292060
goodeye
2
Esta solução cuida de duas soluções: 1.) não enviar formulários em entrar 2.) Permite entrar nas textareas
PlanetUnknown
21

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.

bbmud
fonte
13
Parece bom, mas os campos opcionais são problemáticos, o usuário pode pressionar enter por engano e o formulário será enviado. Eu não vejo como você vai saber quando a pesquisa não está terminado , a menos que você colocar todos os campos conforme necessário (há opções padrão, há campos em branco permitido ...)
Christophe Roussy
19

Uma boa e simples solução jQuery:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});
Eonasdan
fonte
1
+1 Eu estava procurando por uma alternativa jQuery, em vez de usar JS normal comovar key = event.keyCode || event.which; if (key == 13) return false;
RaphaelDDL
1
tecnicamente, isso ainda é um POJ, apenas com um invólucro jquery mais simples. o código que você forneceu é quase a mesma coisa.
Eonasdan
19

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) {...}
sparklos
fonte
5
A diferença entre Enter e Return - muitos operadores de ponto de vendas usam exclusivamente o numpad. +1
helloserve 25/02
8
Agora (21/05/2015) , tanto para digitação normal quanto para digitação numérica, o keyCode é 13 [Chrome 42, IE 11, FIreFox 36]
Cliff Burton
15

É 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;
});
Desenvolvedor
fonte
13

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>
Erics
fonte
1
Hmm, no Chrome e Firefox, uma versão ainda mais curta seria <button disabled style = "display: none;"> <button>, que também tem a virtude de não exigir que o JS funcione. O Safari simplesmente ignora o botão e outras coisas acontecem normalmente.
Erics 27/02
1
Eu realmente não gostei da maneira "ignorar o código-chave 13", então comecei a pensar de uma maneira fácil e complicada, e essa idéia veio à minha mente e, enquanto eu estava rolando esta página, vi esse tópico :). Mais um para idéias mútuas e, claro, a melhor solução.
Jalali Shakib
Resposta perfeita para mim. Eu queria que um formulário emulasse uma CLI para que o usuário pressionasse enter para cada próximo campo e depois enviasse no final.
Nathan
oh brilhante, o último botão pode ser assim para impedir a duplicação de <button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
envios
@ArashMoosapour, por favor, não desative os botões de envio se eles tiverem foco - isso diminui o foco e é uma bagunça para a acessibilidade.
217 Erics
9

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>
sidarcy
fonte
8

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">
Jimwel Anobong
fonte
8
  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.
Irfan Ashraf
fonte
7

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.

Bom olho
fonte
Isso funciona nos elementos da caixa de texto no formulário. Conforme você digita e pressiona enter na caixa de texto, o comportamento padrão envia o formulário. Isso intercepta a tecla Enter e impede o envio.
goodeye
5

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.

Brandon
fonte
4

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>

mate.gwozdz
fonte
perguntando quem e por que reduziria o voto disso: | qual é o problema da minha solução?
mate.gwozdz
Votado para a contribuição. A resposta aceita quebra a maioria da interface do usuário, impedindo que "enter" seja registrado em todo o aplicativo. Não é bom. Eu acho que é uma boa idéia permitir que o enter seja manipulado em elementos de formulário, particularmente botões, então eu gosto do caminho que você está seguindo. Eu acho que isso pode ser alcançado sem um tempo limite. Por exemplo, basta olhar para o atributo do elemento no seu manipulador de eventos. Permitir 'botão' e 'enviar'
Solvitieg
@ NathanCH - Este código faz exatamente o oposto do que você está dizendo. Isso impede que o enter envie o formulário e não impede nenhuma outra funcionalidade - por exemplo, você pode ter um campo de texto e deseja usar enter para criar novos parágrafos.
mate.gwozdz
1
Há um erro de digitação na primeira linha. Em vez disso function(e), deveria ser function(event). Caso contrário, funciona para mim. Obrigado.
Guillermo Prandi
1
Este é um salva-vidas absoluto, já que todo o resto me impede de manipular adequadamente os eventos de salvar eventos para edições como edições em linha da grade. A única sugestão é não usar 'setTimeout'. Eu acho que esse é o problema que as pessoas têm com esta resposta. É muito mimado. Em vez disso, para o evento do on("keydown", function(event) { enterPressed = true; }e, em seguida, no evento de envio, faça on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}Isso garantirá que funcione independentemente do atraso.
Curtis Snowden
3

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;
}
});
Rifkan Razak
fonte
2

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

StackUnder
fonte
2

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.

garlicman
fonte
Percebo que é uma variante da resposta de Tom Hubbard, que eu marquei com +1 porque é realmente o que eu fiz hoje antes de procurar outras idéias no SO.
311313 garlicman
2

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

Solvitieg
fonte
1

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/

Nemesarial
fonte
0

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.

Pedra
fonte
0

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(); }
    });
});
Pjl
fonte
0

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

edx
fonte
0

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.

Waqar Alamgir
fonte
0

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;
      }
Lars Gross
fonte
0

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>

Nisharg Shah
fonte
não funciona quando você possui especificamente method="post"em seu formulário. Por exemplo, quero que o formulário seja enviado por botões, mas não ao pressionar enter enquanto estiver focado na entrada.
Souleste 14/11/19
para essa condição, você pode usar as respostas acima, porque essa resposta é baseada em impedir o envio de formulários inserindo e clicando em ambos. exemplo acima tem method="post"no formulário e seus trabalhos, verifique novamente.
Nisharg Shah
-2

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!');}
    );
});
crizCraig
fonte
-2

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>
Tapas Pal
fonte