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.
Best Answer
Using
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 firstbutton
orinput
withtype="submit"
is what is triggered in this situation. If you specifically settype="button"
, then it's removed from consideration by the browser.