Ingrese el button de triggers, haga clic

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 order. Si estoy en un campo de text en cualquier lugar del formulario y presiono <Enter> , se activa el evento de click del elemento del click . Supongo que es porque el elemento de button se sienta primero.

No puedo encontrar nada que parezca una forma confiable de configurar el button pnetworkingeterminado, ni necesariamente quiero hacerlo en este momento. A falta de algo mejor, capturé una tecla en cualquier parte del formulario y, si se presionó la tecla <Enter> , simplemente lo estoy negando:

 $('form').keypress( function( e ) { var code = e.keyCode || e.which; if( code === 13 ) { e.preventDefault(); return false; } }) 

Hasta donde puedo decir hasta ahora, parece estar funcionando, pero se siente increíblemente agresivo. ¿Alguien sabe de una técnica más sofisticada para hacer esto? De manera similar, ¿hay algún escollo en esta solución del que no estoy al tanto?

Gracias.

Utilizando

 <button type="button">Whatever</button> 

debería hacer el truco.

La razón es porque un button dentro de un formulario tiene su tipo establecido implícitamente para submit . Como dice zzzzBoz, el Spec dice que el primer button o input con type="submit" es lo que se desencadena en esta situación. Si especificas específicamente type="button" , el browser lo elimina de consideración.

Es importante leer las especificaciones de HTML para comprender realmente qué comportamiento se espera:

La especificación de HTML5 establece explícitamente lo que ocurre en las implicit submissions :

El button pnetworkingeterminado de un elemento de formulario es el primer button de envío en order de tree cuyo propietario de formulario es ese elemento de formulario.

Si el agente de usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataforms presionando la tecla "enter" mientras un campo de text está enfocado, envía implícitamente el formulario), y luego lo hace para un formulario cuyo button pnetworkingeterminado tiene una activación definida el comportamiento debe hacer que el agente de usuario ejecute pasos sintéticos de activación de clics en ese button pnetworkingeterminado.

Esto no se hizo explícito en la especificación HTML4, sin embargo, los browseres ya han implementado lo que se describe en la especificación HTML5 (razón por la cual está incluido explícitamente).

Editar para agregar:

La respuesta más simple que puedo pensar es poner su button de envío como el primer elemento [type="submit"] en el formulario, agregar relleno al final del formulario con css, y colocar absolutamente el button de enviar en la parte inferior donde Me gustaría.

No creo que necesites javascript o CSS para arreglar esto.

De acuerdo con la especificación html 5 para botones, un button sin atributo de tipo se trata igual que un button con su tipo configurado para "enviar", es decir, como un button para enviar su formulario de contenido. Establecer el tipo de button en "button" debería evitar el comportamiento que estás viendo.

No estoy seguro del soporte de browser para esto, pero el mismo comportamiento se especificó en la especificación html 4.01 para botones, así que espero que sea bastante bueno.

Al presionar 'Enter' en el <input type="text"> enfocado, se activa el evento 'click' en el primer elemento posicionado: <button> o <input type="submit"> . Si presiona 'Enter' en <textarea> , simplemente crea una nueva línea de text.

Vea el ejemplo aquí .

Su código impide crear una nueva línea de text en <textarea> , por lo que debe presionar la tecla presionar solo para <input type="text"> .

Pero ¿por qué necesita presionar Enter en el campo de text? Si desea enviar un formulario presionando 'Enter', pero el <button> debe permanecer el primero en el layout, simplemente juegue con el marcado: coloque el código <input type="submit"> antes del <button> y use CSS para save el layout que necesitas

Capturando 'Enter' y guardando marcado:

 $('input[type="text"]').keypress(function (e) { var code = e.keyCode || e.which; if (code === 13) e.preventDefault(); $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/ }); 

Puede usar javascript para bloquear el envío de formularios hasta el momento apropiado. Un ejemplo muy crudo:

 <form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html"> <input type='text' name='txtTest' /> <input type='button' value='Submit' onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' /> </form> 

Al presionar enter aún se activará el formulario para enviar, pero el javascript evitará que se envíe, hasta que presione el button.

Al pulsar Intro en el campo de text de un formulario, de forma pnetworkingeterminada, se enviará el formulario. Si no quieres que funcione de esa manera, debes capturar la tecla enter, presionar y consumir como lo has hecho. No hay forma de evitar esto. Funcionará de esta manera incluso si no hay un button presente en el formulario.

Lo haría de la siguiente manera: en el controller para el evento onclick del button (no enviar), verifique el código key del object del evento. Si es "enter", devolvería false.

Agregué un button de tipo "enviar" como primer elemento del formulario y lo hice invisible ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0; ). Funciona como una actualización del sitio, es decir, no hago nada cuando se presiona el button, excepto que el sitio se carga nuevamente. Para mí funciona bien …