IE10 - 奇怪的表单提交问题答案

【问题标题】：IE10 - Strange Form Submission IssueIE10 - 奇怪的表单提交问题
【发布时间】：2014-03-06 04:33:05
【问题描述】：

请看下面的代码sn-p：

<!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>

问题描述：我的一个 JSP 页面中有上述代码。当这个页面在 Internet Explorer 10 中呈现时，我看到了一个奇怪的问题。当我点击继续按钮（即表单的提交按钮）时，会自动触发信用卡字段的 onfocus 并调用函数“unmaskCC”。表格不提交。 此问题仅在 IE10 中出现。

我已经使用 Google Chrome、Firefox、Safari（台式机、平板电脑、移动设备）测试了同一页面并且它似乎在任何地方都运行良好。

我最初认为单击提交会导致“事件冒泡”，但这不可能发生，因为继续按钮是信用卡字段的兄弟。

另请注意：我有解决此问题的方法，即更改 button type="button"，然后通过 onclick javascript 提交表单，即 document.getElementById("editProfileForm").submit(); 按预期工作正常。

但我无法理解是什么导致 <button type="submit"> 无法按预期工作。

这个 IE10 特定问题让我发疯了。在这里的任何帮助将不胜感激。

提前致谢。

【问题讨论】：

................................

标签： javascript html submit internet-explorer-10 onfocus

【解决方案1】：

这个问题（在 IE 11 中也可以重现）似乎是由 IE 中的事件处理问题引起的：当您单击提交按钮时，文本输入字段首先失去焦点，因此它的 onblur 处理程序被触发，导致出现一个模态窗口，这里IE不知何故丢失了输入按钮被点击的信息。

如果您替换 alert，例如通过console.log，问题不会发生。在您的真实代码中，您可能在onblur 事件处理程序中有一些东西使某些元素或小部件获得焦点，同样导致 IE 无法跟踪它在做什么。

【讨论】：

感谢您的意见。