El evento de clic de botón se activa al presionar la tecla Intro en una entrada diferente (sin formularios)

111

Esta lógica se activa al presionar "Enter" en la entrada "Cantidad", y no creo que deba hacerlo (no lo hace en Chrome). ¿Cómo puedo evitar esto, y si no prevenirlo en IE, manejarlo para que la lógica en el evento de clic no se active?

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

Guión

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Jquery: 1.7.2
  • IE 9
  • (Funciona en Chrome)
jquery internet-explorer contactmatt
fuente
1
Contrariamente a la pregunta, esto me acaba de pasar con Chrome y Firefox. Sin embargo, la misma solución (tipo de botón).
Tim Grant

Respuestas:

324

Tuve el mismo problema y lo resolví agregando un type="button"atributo al <button>elemento, por lo que IE piensa que el botón es un botón simple en lugar de un botón de envío (que es el comportamiento predeterminado de un <button>elemento).

pallati
fuente
6
Tuve el mismo problema con Firefox. el atributo type = "button" también lo resolvió para mí
Alexander Fradiani
109
Que vivas mil años.
TheBrain
4
Excelente solución. Pensé que los navegadores solo se enviarían automáticamente en "Enter" cuando estuvieran dentro de las etiquetas <form>. Pero veo que estaba equivocado.
Clayton Bell
2
Días de gritarle a IE9 (entre mis gritos generales a otras cosas a las que tengo que gritar) y esta fue la solución. Maldita sea.
phatskat
5
Ha sido mordido por este problema dos veces en solo un par de semanas. Simplemente se siente extraño tener que gritar type="button"en un <button>elemento. jaja ... :) Espero recordar esto para la próxima vez.
Sam
32

Hoy me encontré con este problema. IE asume que si presiona la tecla Intro en cualquiera de los campos de texto, desea enviar el formulario, incluso si los campos no son parte de un formulario e incluso si el botón no es del tipo "enviar".

Debe anular el comportamiento predeterminado de IE con preventDefault (). En su selector de jQuery, coloque el div que contiene los cuadros de texto que desea ignorar la tecla enter - en su caso, el div "page". En lugar de seleccionar todo el div, también puede especificar los cuadros de texto que desea ignorar específicamente.

$('#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
fuente
La mejor solución cuando necesita utilizar componentes personalizados y no puede agregar type = "button".
FireZenk
Gracias Clinton, esto funcionó para mí. Primero intenté hacer que todos los botones de tipo "botón" todavía no funcionaran. Luego tuve que suprimir el evento burbujeante al presionar la tecla enter.
Rupesh Kumar Tiwari
Muchas gracias. He estado enfurecido con mi computadora durante las últimas 2 horas.
Edwin
4

Estaba teniendo este problema con ASP.NET WebForms:

<asp:Button />

Esto NO se puede resolver simplemente agregando type = "button" porque ASP.NET lo reemplaza con type = "submit" (puede ver este comportamiento en el navegador si inspecciona el elemento).

La forma correcta de hacer esto en asp.net es agregar 

<asp:Button UseSubmitBehavior="false" />

al botón. ASP agregará automáticamente el atributo type = "button".

Guilherme
fuente
2

IE cree que cualquier buttonelemento es un botón de envío (ya sea que tenga formo no). También maneja la pulsación de la Entertecla en un elemento de formulario como un envío de formulario implícito. Entonces, dado que cree que está tratando de enviar su formulario, cree que lo ayudará y activará el clickevento en (lo que cree que es) el botón de envío .

Puede adjuntar un keyupevento al inputo al buttony buscar la Enterclave ( e.which === 13) yreturn false;

Mono hereje
fuente
1

Una solución basada en jQuery que hace esto para cada botón es:

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

Sin embargo, el evento de clic seguirá apareciendo en los elementos principales por alguna razón ...

lschult2
fuente
0

Para Chrome, puede agregar <button type="submit" style="display:none"/> porque en Chrome el tipo de botón predeterminado es "enviar"

Para IE, he intentado lo mismo con type="button" (en IE el tipo de botón predeterminado es "botón") pero no funcionó bien.

Así que aquí está la solución. En HTML agregue (keypress)=xxx($event)en su formulario. En TS,

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

Lo anterior funcionará en todos los escenarios, como navegadores cruzados, clic normal y flujo de pestañas.

Tamil. S
fuente