IE bug triggers haz clic para 2 botones?

Question

Estoy intentando activar el botón de enviar cuando un usuario presiona enter. Funciona muy bien para todos los navegadores excepto Internet Explorer 9. Lo curioso es que IE insiste en activar también el clic para otro botón que nunca se lo dije. ¿Estoy haciendo algo mal o cómo arreglar esto?

A continuación se muestra mi código. Pulsando Entrar en IE desencadena la pulse ver como se esperaba, pero por alguna razón también desencadena la "algún botón" clic (incluso sin mi oyente pulsación de tecla):

$('input[type=submit]').click(function() { 
    alert('Submit click'); 
}); 

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH 
$('input[type=text]').keypress(function (event) { 
    var keycode = event.keyCode || event.which; 
    if (keycode == 13) $('input[type=submit]').click(); 
}); 

//ROUTE CLEAR HANDLER 
$('button').click(function() { 
    alert('Button click'); 
}); 

se puede ver el error en acción aquí: http://jsfiddle.net/h64xD/

Answer 1

Aquí hay un par de cosas a tener en cuenta:

IE9 cuenta el elemento <button/> como type="submit" por defecto. Así que para hacerlo no presente, tiene que ser explícito:

<button type="button">Some button</button> 

Si lo hace, se dará cuenta de que el emulado click caso ahora no activa el <button/> pero todavía dispara 2 eventos. La razón es que, como no se ha definido de forma explícita un elemento <form/>, IE9 asume el mando como estar en una forma, y ​​por lo tanto presionando enter en el cuadro de texto desencadena 2 eventos:

• la que se está emulando
• enviar el formulario predeterminado comportamiento del botón

Así que de nuevo para evitar este problema, tiene que ser explícita:

<button type="button">Some button</button> 
<form><input type="text" /></form> 
<input type="submit" value="Submit" /> 

Ahora, estas son las razones por las que está viendo el comportamiento en IE. respuesta @MrSlayer 's abastece a la segunda edición de detener el evento keypress después de haber solucionado satisfactoriamente, usando preventDefault()

Answer 2

¿Qué tal activar el envío del formulario en lugar de hacer clic en un botón?

$('input[type=text]').keypress(function(e) { 
    var keycode = event.keyCode || event.which, 
     frm = $(this).closest('form'); 

    if (keycode == 13) { 
      e.stopPropagation(); 
      frm.submit(); 
      return false; 
    } 
    return true; 
}); 

--EDIT--

Actualizado ligeramente para detener la propagación del evento.

Answer 3

la tecla ENTER tiene un comportamiento por defecto a presentar, por lo que necesita para prevenir el comportamiento por defecto de ejecución. Como la etiqueta button es, de manera predeterminada, type="submit" está ejecutando ese botón cuando se presiona la tecla Intro.

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH 
$('input[type=text]').keypress(function (event) { 
    var keycode = event.keyCode || event.which; 
    if (keycode == 13) 
    { 
     event.preventDefault(); 
     $('input[type=submit]').click(); 
    } 
}); 

Answer 4

En primer lugar, no es necesario conectar manualmente un evento para presentar un formulario cuando el usuario presiona entrar - el navegador ya que maneja.

Curiosamente, esto tenía que ver con el orden de los elementos, las asociaciones de formas implícitas, así como con el hecho de que IE maneja los botones como elementos de envío.

intentar cambiar el orden de estos botones para ver lo que quiero decir:

<input type="text" /> 
<input type="submit" value="Submit" /> 
<button>Some button</button> 

Naturalmente, el navegador ya tiene instrucciones para escuchar a responder a la Introduzca en un texto de entrada. Esto da como resultado que el navegador haga clic en el botón de envío asociado. Además, dado que no ha proporcionado explícitamente un form, o elementos asociados entre sí a través de su atributo form, el navegador está intentando hacer esa relación por usted.

En su código, se suponía que el elemento <button> era el botón de envío de la entrada de texto (porque era el primer botón de envío en la forma implícita). Como tal, cada vez que presione Ingrese en la entrada de texto, el explorador naturalmente activa el evento de clic del botón asociado.

Si vuelve a ordenar los elementos, como he mencionado anteriormente, vemos lo contrario. IE asocia el otro elemento <input> con el cuadro de texto. Y al presionar Ingresar en el cuadro de texto aumenta implícitamente el evento de clic en la entrada de envío.

Puede confirmar este comportamiento comparando los atributos .form de varios elementos. Por ejemplo, la adición de algunos id valores nos dará un acceso más fácil a las siguientes:

<button id="fiz">Some Button</button> 
<input id="foo" type="text" /> 
<input id="bar" type="submit" value="Submit" /> 

A continuación, ejecute algunas comparaciones rápidas:

var button = document.getElementById("fiz"); 
var text = document.getElementById("foo"); 
var submit = document.getElementById("bar"); 

button.form === text.form; // true 
submit.form === text.form; // true 
button.form === submit.form; // true 

Así que al final, le toca a usted para eliminar la ambigüedad entre el dos botones, declarando que el elemento <button> es type='button', o colocándolo después del botón de envío previsto.