Question

我有一个问题，在IE8中，输入无法提交表单。我已经生成了一个测试页面来揭示这个问题。似乎在onLoad函数中显示表单会禁用 enter 按钮不再触发提交的结果。这是IE8中的错误还是一些安全问题？

重现这一点的代码是：

onload = function() { 
    document.getElementById('test').style.display = 'block'; 
}

#test {
    display: none;
}

<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value=""> 
    <input type="password" name="pw" value="">
    <input type="submit" value="submit" id="submit"> 
</form>

Answer 1

我找到了一个合适的解决方案，希望与大家分享。

不使用<input type="submit...>，而是使用<button type="submit"...>。这将在其他浏览器（IE6-7，FF3）中完全相同 AND 在IE8中有效。：）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css">
#test {
    display: none;
} 
</style> 
<script type="text/javascript"> 
onload = function() { 
    document.getElementById('test').style.display = 'block'; 
};
</script> 
</head> 
<body> 
<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value="" /> 
    <input type="password" name="pw" value="" />
    <button type="submit" value="submit" id="submit"></button>
</form> 
</body> 
</html>

Answer 2

$("form input").keypress(function (e) {
   if(e.which === 13) {
      $("form").submit();
   }
});

以上是一个正确的解决方案。参考：IE Not submitting my form on enter press of enter key?

Answer 3

我认为外翻比你想象的要复杂得多......

当使用css类将表单的显示值设置为none或仅在页面初始化时使用样式属性时，仅当您有多个具有文本类型的输入字段时，才能在文本字段中按Enter键。 ..如果你有一个文本字段它工作正常..如果你有多个，它不会触发表单提交...

我在这里做了一个演示......

工作正常（普通表格） http://yasinergul.com/stackoverflow/ie8-enter-key-bug/one.html

工作正常（表单隐藏和放回可见，但它有一个文本输入） http://yasinergul.com/stackoverflow/ie8-enter-key-bug/two.html

不起作用（表单隐藏和放回可见，但它有两个文本输入） http://yasinergul.com/stackoverflow/ie8-enter-key-bug/three.html

我认为最好的方法是给对象提供.hidden类，但不为此css选择器设置display：none。你可以用像

这样的jquery来隐藏它

$(".hidden").hide();

当页面加载时，表单显示为毫秒，但在jquery工作后隐藏...

Answer 4

我不能确切地说它是否确实存在错误，但我可以确认您报告的行为在IE 8中发生了变化......我想这可能是一个错误，而不是故意的改变。

如果使用CSS display：none设置表单，则默认的提交按钮行为不起作用。

其他浏览器，包括IE 7（甚至使用IE 7标准兼容模式的IE 8）都没有问题。

我通过使用高度来解决这个问题：0px;在CSS中，然后在我想要显示表单时让javascript设置适当的高度。相反，使用高度，默认的输入密钥提交行为似乎正常工作。

Answer 5

旧票，但我想补充一下我认为的解释：

IE8做了以下特殊事情：Enter键将提交表单，但任何

<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />

不会在POST中发送。

IE9更改行为并发送值。就我的测试所显示，Chrome总是发送价值。

我希望这会有所帮助......

Answer 6

任何未来的用户都会遇到这个问题：

对我有用的是添加DOCTYPE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Answer 7

对@Jitendra Pancholi建议的修正 - 现在它只提交我们想要的形式，而不是所有形式

$("form input").keypress(function (e) {
   if(e.which === 13) {
      $(this.form).submit();
   }
});

Answer 8

我在IE8中尝试过，它对我有用。您必须确保表单的某些部分具有焦点。

Javascript具有焦点功能，您可以使用它来设置焦点，如果这是您需要的。

var textbox = document.getElementById("whatever name input box's id will be");
if(textbox) textbox.focus();

Answer 9

您可能希望在输入框中添加一个onkeyup事件，这样如果您在输入框中点击一个输入，那么它也会提交。

正如CodePartizan所提到的，你需要把注意力集中在按钮上，所以如果你选中按钮，或点击它，它似乎对我也有效。

Answer 10

我相信 Yasin 已经明白了。我只是遇到了同样的问题：表单中的多个文本字段的可见性是“隐藏”的。我的解决方法（防止表单闪烁）是在css中将表单opacity设置为0，然后在文档就绪时使用jQuery自定义其样式设置。

我认为这不是用JS修复的东西。

Answer 11

是的，我今天也被这个虫子咬了。我发现了这种解决方法（来自OP的差异）：

 <script type="text/javascript"> 
 onload = function() { 
     document.getElementById('test').style.display = 'block'; 
+    document.getElementById('test').innerHTML =
+        document.getElementById('test').innerHTML;
 } 
 </script> 
 </head>

只需从自身内容中重新创建表单的内容即可。让人惊讶。但它的确有效。（着名的遗言......）

Answer 12

这适用于IE8。我只使用一个输入字段时遇到了这个问题。

了解详情：http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

Answer 13

我遇到了同样的问题，在我读到之前没有任何解决方案有帮助：

http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

我的表单只有一个输入字段....呃！：）

Answer 14

找到了一个有效的解决方案。

使提交按钮不可见，而不是使用display：none;

input#submit {
color: transparent;
background: transparent;
border: 0px;
}

在IE8中输入表单中的键不起作用

14 个答案: