IE10 - Strange Form Submission Issue

问题

Please see the code snippet below:

<!DOCTYPE html>
<html>
<body>
<form name="editProfileForm" method="post" action="profileDataCollection.do">
    <input type="text" id="credit-card" name="credit-card" onfocus="unmaskCC(this);" onblur="maskCC(this);" />
    <input type="hidden" name="ccValue" value=""/>
    <button type="submit">Continue</button>
</form>
<script type="text/javascript">
function unmaskCC(field){
    /*code for unmasking credit card field*/
    alert("unmask called"); /*For demo purpose introduced an alert*/
}
function maskCC(field){
    /*code for masking the credit card field*/
    alert("mask called"); /*For demo purpose introduced an alert*/
}
</script>
</body>
</html>

Problem Description: I have the above code in one of my JSP pages. When this page is rendered in Internet Explorer 10, I see a strange problem. When I hit the continue button (i.e. form's submit button), the onfocus of the credit-card field is automatically triggered and the function "unmaskCC" is called. The form does not submit. This problem occurs only in IE10.

I have tested the same page with Google Chrome, Firefox, Safari (Desktop, Tablet, Mobile) and everywhere it seems to be working fine.

I initially thought that clicking submit is causing "event bubbling", but that cannot happen, since continue button is a sibling of credit-card field.

Also Note: I have the workaround for this issue i.e. changing the button type="button" and then submitting the form via onclick javascript i.e. document.getElementById("editProfileForm").submit(); which works fine as expected.

But I am unable to understand what is causing the <button type="submit"> to not work as expected.

I am going crazy with this IE10 specific issue. Any help here would be highly appreciated.

Thanks in advance.

回答1:

The problem (which is reproducible in IE 11, too) seems to be caused by a problem in event handling in IE: when you click on the submit button, the text input field first loses focus, so its onblur handler is triggered, causing a modal window to appear, and here IE somehow loses the information that the input button had been clicked on.

If you replace alert e.g. by console.log, the problem does not occur. In your real code, you probably have something in the onblur event handler that makes some element or widget get focus, similarly resulting in IE losing track of what it was doing.

来源：https://stackoverflow.com/questions/22215022/ie10-strange-form-submission-issue

标签

javascript

html

submit

internet-explorer-10

onfocus