In Firefox, when a button element and an input[type=text] element share a form, and the button element has a click handler, then that click handler function will get fired when the user focuses on the input[type=text] and presses return. The first time, the event target will be the input[type=text] element, but the second time it happens, it'l be the button element.
Workaround: use input[type=button] instead.
Test page Workaround is included
Reported by: Isaac Z. Schlueter.
Mozilla, Opera | Reported on 16 October 2006.
This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.
Search reports by browser:
2 Posted by Sebastian Redl on 16 October 2006 | Permalink
Forgot to add: see also the HTML spec:
http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON
The type attribute on defaults to submit.
Tested some more. Konqueror 3.5.4 and Opera 9 behave consistently: they fire the click event, but they always have the button as the target.
So the real bug here is that, on the first call, Mozilla has the input element as the target. Note that this only happens if you don't add any text! If you write anything in the text field first, the button will be the target even on the first return.
Weird, but not very bad, I think.
3 Posted by Tino Zijdel on 17 October 2006 | Permalink
Also note that using an onclick handler on your submit-element to do form validation is actually bad practice; that's what the onsubmit event of the form-element is for.
Commenting guidelines:
1 Posted by Sebastian Redl on 16 October 2006 | Permalink
Not exactly a bug, since it's behaviour by design. You'll observe the same behaviour with an input[type=submit].
The issue is quite simply that many web authors gave their submit button an onclick handler in order to do form validation and similar things. Pressing enter while focused on a control would, however, submit the form and circumvent such handlers. That's why they're called anyway.
The correct workaround is to give the button a type="button" attribute.