IE10 - 奇怪的表单提交问题 [英] IE10 - Strange Form Submission Issue
问题描述
请参阅下面的代码片段：
<！DOCTYPE html>
< html>
< body>
< form name =editProfileFormmethod =postaction =profileDataCollection.do>
< input type =textid =credit-cardname =credit-cardonfocus =unmaskCC（this）;的onblur = maskCC（本）; />
< input type =hiddenname =ccValuevalue =/>
< button type =submit>继续< / button>
< / form>
< script type =text / javascript>
函数unmaskCC（field）{
/ *代码用于揭露信用卡领域* /
alert（unmask called）; / *为了演示目的，引入了一个提醒* /
}
函数maskCC（field）{
/ *用于屏蔽信用卡字段的代码* /
alert（mask called ）; / *为了演示目的引入了提醒* /
}
< / script>
< / body>
< / html>
问题描述：我在我的一个JSP页面中有上述代码。当此页面在Internet Explorer 10中呈现时，我看到一个奇怪的问题。当我点击继续按钮（即表单的提交按钮）时，信用卡字段的焦点会自动触发，并调用函数unmaskCC。表单不提交。 仅在IE10中出现此问题。
我测试了Google Chrome，Firefox，Safari（桌面，平板电脑，移动）
我最初认为点击提交会导致事件冒泡，但这不会发生，因为继续按钮是一个信用卡领域的兄弟姐妹。
另外注意：我有这个问题的解决方法，即更改按钮类型=button，然后通过onclick javascript提交表单，例如
document.getElementById（editProfileForm）。submit（）; 如预期般运作良好。
但我无法理解是什么导致< button type =submit> 按预期工作。
我对这个IE10特定问题感到疯狂。任何帮助在这里将不胜感激。
预先感谢。
<问题（在IE 11中也可以重现）似乎是由IE中的事件处理问题导致的：当您单击提交按钮时，文本输入字段首先失去焦点，所以它的 onblur 处理程序被触发，导致出现一个模式窗口，在这里IE以某种方式丢失了输入按钮被点击的信息。
如果您替换 alert 例如通过 console.log ，问题不会发生。在你真实的代码中，你可能在 onblur 事件处理程序中有一些东西让某些元素或小部件获得焦点，同样导致IE失去了它正在做的事情。
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.
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.
这篇关于IE10 - 奇怪的表单提交问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
