O evento de clique de botão é disparado ao pressionar a tecla Enter em uma entrada diferente (sem formulários)

111

Esta lógica é disparada ao pressionar "Enter" na entrada "Amount", e eu não acredito que deveria (não acontece no Chrome). Como posso evitar isso, e se não impedir no IE, trate disso para que a lógica no evento de clique não seja disparada.

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

Roteiro

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Jquery: 1.7.2
  • IE 9
  • (Funciona no Chrome)
jquery internet-explorer contactmatt
fonte
1
Ao contrário da pergunta, isso só aconteceu comigo com o Chrome e o Firefox. Porém, a mesma correção (tipo de botão).
Tim Grant

Respostas:

324

Eu tive o mesmo problema e resolvi-o adicionando um type="button"atributo ao <button>elemento, pelo qual o IE pensa o botão como um botão simples em vez de um botão de envio (que é o comportamento padrão de um <button>elemento).

pallati
fonte
6
Eu tive o mesmo problema com o Firefox. o atributo type = "button" também resolveu para mim
Alexander Fradiani
109
Que você viva mil anos.
TheBrain
4
Excelente correção. Achei que os navegadores só se submeteriam automaticamente com "Enter" quando estivessem dentro das tags <form>. Mas vejo que estava errado.
Clayton Bell
2
Dias gritando no IE9 (entre meus gritos gerais com outras coisas que tenho que gritar) e essa foi a solução. Hot dang.
phatskat
5
Fui mordido por esse problema duas vezes em apenas algumas semanas. Parece estranho ter que chamar type="button"um <button>elemento. haha ... :) Espero me lembrar disso da próxima vez.
Sam
33

Corri para este problema hoje. O IE assume que se você pressionar a tecla Enter em qualquer um dos campos de texto, deseja enviar o formulário - mesmo se os campos não fizerem parte de um formulário e mesmo se o botão não for do tipo "enviar".

Você deve substituir o comportamento padrão do IE com preventDefault (). Em seu seletor jQuery, coloque a div que contém as caixas de texto que você deseja ignorar a tecla enter - no seu caso, a div "página". Em vez de selecionar todo o div, você também pode especificar as caixas de texto que deseja ignorar especificamente.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});
Christian Clinton
fonte
A melhor solução quando você precisa usar componentes personalizados e não pode adicionar type = "button".
FireZenk,
Obrigado Clinton, isso funcionou para mim. Primeiro tentei fazer com que todos os botões do tipo "botão" ainda não funcionassem. Então eu tive que suprimir o evento borbulhando ao pressionar a tecla Enter.
Rupesh Kumar Tiwari
Muito obrigado. Estive furioso com meu computador nas últimas 2 horas.
Edwin
4

Eu estava tendo este problema com ASP.NET WebForms:

<asp:Button />

Isso NÃO pode ser resolvido apenas adicionando type = "button" porque o ASP.NET o substitui por type = "submit" (você pode ver esse comportamento no navegador se inspecionar o elemento).

A maneira correta de fazer isso no asp.net é adicionar 

<asp:Button UseSubmitBehavior="false" />

para o botão. ASP adicionará automaticamente o atributo type = "button".

Guilherme
fonte
2

O IE pensa que qualquer buttonelemento é um botão de envio (quer você tenha formou não). Ele também lida com o pressionamento da Entertecla em um elemento de formulário como um envio de formulário implícito. Portanto, como ele pensa que você está tentando enviar seu formulário, ele vai ajudá-lo e acionar o clickevento (o que ele pensa ser) no botão de envio .

Você pode anexar um keyupevento ao inputou ao buttone verificar a Enterchave ( e.which === 13) ereturn false;

Macaco herege
fonte
1

Uma solução baseada em jQuery que faz isso para todos os botões é:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

No entanto, o evento de clique ainda aparecerá como elemento pai por algum motivo ...

lschult2
fonte
0

Para o Chrome, você pode adicionar <button type="submit" style="display:none"/> porque no Chrome o tipo de botão padrão é "enviar"

Para o IE, tentei fazer o mesmo com type="button"(no IE, o tipo de botão padrão é "botão"), mas não funcionou bem.

Então aqui está a solução. Em HTML, adicione (keypress)=xxx($event)em seu formulário. Em TS,

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

O procedimento acima funcionará em todos os cenários, como navegadores cruzados, clique normal e fluxo de guias.

Tamil.S
fonte