Internet Explorer and button events

Filing this one under "Strange decisions that Internet Explorer makes", IE will assume that when a user hits enter in a textbox, they want to submit the form they are filling out.
Normally this would be a reasonable assumption except for two problems;

  • IE does not check that the textbox is actually in a form
  • IE assumes that a button is of type="submit" unless you specify it explicitly as being of type="button"

The combination of these two problems can lead to a problem if you have a button on a page which performs an action, and you have an unrelated textbox that you may be using for search or going through a paged grid.

Entering your search term and hitting enter will behave as expected in most other browsers, however in IE this will trigger the click event of the button. This situation is made even worse if the textbox is subscribed to the keyup event as this will fire after the click event, so depending on the click event it may not fire at all.

Thankfully a quick solution is to specify the button type so simply changing

<button id="myButton">Click Here</button>

to

<button type="button" id="myButton">Click Here</button>

will solve the problem and restore some sanity