I have a very strange problem with IE8; I have reduced this as much as possible to the extract below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function dismissOperation() {
alert("Would dismiss");
}
</script>
</head>
<body >
<input type="text" />
<input type="text" onfocus="alert('text box got focus')" />
<button onclick="dismissOperation()" onfocus="alert('Dismiss button got focus')">Dismiss</button>
</body>
</html>
The problem is that when a value is entered into the first textbox followed by return/enter, the button receives focus and the click event is delivered (on the button).
As a test, I added a second text entry box (as above). With the second box added, the focus still goes straight to the button when a value is entered into the first box.
What is causing the focus to go to the button and the click being delivered? Is there any workaround to this?
By default button element is considered as a submit button and that could be the reason for this. Give attribute type=”button” for your button element.