请看下面的代码片段:
<!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 中呈现时，我看到一个奇怪的问题。当我点击继续按钮(即表单的提交按钮)时，自动触发信用卡字段的焦点并调用函数“unmaskCC”。表单不提交。 此问题仅在IE10中出现。
我用 Google Chrome、Firefox、Safari(台式机、平板电脑、移动设备)测试了同一页面 它似乎在任何地方都运行良好。
我最初认为点击提交会导致“事件冒泡”，但这不可能发生，因为继续按钮是信用卡字段的兄弟。
另请注意:我有解决此问题的方法，即更改 button type="button"然后通过 onclick javascript 提交表单，即
document.getElementById("editProfileForm").submit();按预期工作正常。
但我无法理解是什么导致了 <button type="submit">无法按预期工作。
这个 IE10 特定问题让我抓狂。非常感谢此处的任何帮助。
提前致谢。
最佳答案
该问题(在 IE 11 中也可重现)似乎是由 IE 中的事件处理问题引起的:当您单击提交按钮时，文本输入字段首先失去焦点，因此它的 onblur 处理程序被触发，导致模式窗口出现，此时 IE 以某种方式丢失了输入按钮已被单击的信息。
如果您替换 alert 例如通过console.log，问题没有发生。在您的真实代码中，您可能在 onblur 事件处理程序中有一些东西使某些元素或小部件获得焦点，同样导致 IE 无法跟踪它在做什么。
关于javascript - IE10 - 奇怪的表单提交问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22215022/