Question

请参阅下面的代码段：

<!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中出现此问题。

我使用谷歌浏览器，Firefox，Safari（桌面，平板电脑，手机）测试了同一页面它似乎在任何地方工作正常。

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

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

但我无法理解导致<button type="submit">无法正常工作的原因。

我对这个IE10特定问题感到疯狂。任何帮助都将受到高度赞赏。

提前致谢。

Answer 1

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

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

IE10 - 奇怪的表格提交问题

1 个答案: