I have a page with two buttons. One is a <button>
element and the other is a <input type="submit">
. The buttons appear on the page in that order. If I'm in a text field anywhere in the form and press <Enter>
, the button element's click
event is triggered. I assume that's because the button element sits first.
I can't find anything that looks like a reliable way of setting the default button, nor do I necessarily want to at this point. In the absence of anything better, I've captured a keypress anywhere on the form and, if it was the <Enter>
key that was pressed, I'm just negating it:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
As far as I can tell so far, it seems to be working, but it feels incredibly ham-fisted.
Does anyone know of a more sophisticated technique for doing this?
Similarly, are there any pitfalls to this solution that I'm just not aware of?
Thanks.
Using
<button type="button">Whatever</button>
should do the trick.
The reason is because a button inside a form has its type implicitly set to submit
. As zzzzBoz says, the Spec says that the first button
or input
with type="submit"
is what is triggered in this situation. If you specifically set type="button"
, then it's removed from consideration by the browser.