Tengo una página con dos botones. Uno es un elemento <button> y el otro es un <input type="submit"> . Los botones aparecen en la página en ese orden. Si estoy en un campo de texto en cualquier parte del formulario y presiono <Enter> , se activa el evento de click del elemento de botón. Supongo que es porque el elemento del botón se encuentra primero.
No puedo encontrar nada que parezca una forma confiable de configurar el botón predeterminado, ni necesariamente quiero hacerlo en este momento. A falta de algo mejor, capturé una pulsación de tecla en cualquier parte del formulario y, si fue la <Enter> la que se presionó, simplemente la estoy negando:
$('form').keypress( function( e ) { var code = e.keyCode || e.which; if( code === 13 ) { e.preventDefault(); return false; } })Por lo que puedo decir hasta ahora, parece estar funcionando, pero se siente increíblemente torpe.
¿Alguien sabe de una técnica más sofisticada para hacer esto?
Del mismo modo, ¿hay alguna trampa en esta solución de la que no esté al tanto?
Gracias.
Utilizando
<button type="button">Whatever</button>debería hacer el truco.
La razón es que un botón dentro de un formulario tiene su tipo establecido implícitamente para submit . Como dice zzzzBoz, la especificación dice que el primer button o input con type="submit" es lo que se activa en esta situación. Si establece específicamente type="button" , el navegador lo elimina de la consideración.
Es importante leer las especificaciones HTML para comprender realmente qué comportamiento se espera:
La especificación de HTML5 establece explícitamente lo que sucede en implicit submissions :
El botón predeterminado de un elemento de formulario es el primer botón de envío en orden de árbol cuyo propietario de formulario es ese elemento de formulario.
Si el agente de usuario admite permitir que el usuario envíe un formulario de forma implícita (por ejemplo, en algunas plataformas al presionar la tecla "enter" mientras un campo de texto está enfocado implícitamente envía el formulario), entonces hacerlo para un formulario cuyo botón predeterminado tiene una activación definida El comportamiento debe hacer que el agente de usuario ejecute pasos de activación de clics sintéticos en ese botón predeterminado.
Esto no se hizo explícito en la especificación de HTML4; sin embargo, los navegadores ya han implementado lo que se describe en la especificación de HTML5 (razón por la cual se incluye explícitamente).
Editar para agregar:
La respuesta más simple que se me ocurre es colocar su botón de envío como el primer elemento [type="submit"] en el formulario, agregar relleno en la parte inferior del formulario con css y colocar absolutamente el botón de envío en la parte inferior donde me gustaría
Dondequiera que use un elemento <button> por defecto, considera que button type="submit" , por lo que si define el button type="button" , entonces no considerará ese <button> como botón de envío.