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

Posted

技术标签:

【中文标题】在 IE8 中输入表单中的键不起作用【英文标题】：In IE8 enter key in a form does not work 【发布时间】：2010-11-28 12:19:19 【问题描述】：

我有一个问题，在 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>

【问题讨论】：

+1 为清楚起见。最近很少见。 欺骗：***.com/questions/964734/… 【参考方案1】：

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

不要使用&lt;input type="submit...&gt;，而是使用&lt;button type="submit"...&gt;。 这将在其他浏览器（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>

【讨论】：

我在 IE 8 中没有看到这个工作。我仍然在另一端得到“null”值。假设“null”意味着他们在 IE 8 或 9 中点击了“ENTER”，那么只测试“if(submit == "submit" || submit == null)”会更容易。【参考方案2】： 
$("form input").keypress(function (e) 
   if(e.which === 13) 
      $("form").submit();
   
);

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

【讨论】：

为我做的，可能不是最好的解决方案，但它有效，做得好，+1【参考方案3】：

我认为一切都比你想象的要复杂得多......

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

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

工作正常（正常形式） http://yasinergul.com/***/ie8-enter-key-bug/one.html

工作正常（表单隐藏并设置为可见，但只有一个文本输入） http://yasinergul.com/***/ie8-enter-key-bug/two.html

不起作用（表单隐藏并设置为可见，但它有两个文本输入） http://yasinergul.com/***/ie8-enter-key-bug/three.html

我认为最好的方法是给对象一个 .hidden 类，但不为这个 css 选择器设置 display:none。你可以用jquery把它隐藏起来

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

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

【讨论】：

这里有一篇很好的文章：thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter【参考方案4】：

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

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

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

我自己通过使用 height:0px; 解决了这个问题。在 CSS 中，然后在我想显示表单时让 javascript 设置适当的高度。改用高度，默认的输入键提交行为似乎正常工作。

【讨论】：

【参考方案5】：

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

IE8 做了以下奇特的事情：Enter 键会提交表单，但是任何

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

不会在 POST 中发送。

IE9 改变行为并发送值。据我的测试显示，Chrome 总是发送值。

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

【讨论】：

【参考方案6】：

对于遇到此问题的任何未来用户：

对我有用的是添加 DOCTYPE：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

【讨论】：

【参考方案7】：

修复了@Jitendra Pancholi 的建议——现在它只提交我们想要的表单，而不是所有表单

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

【讨论】：

【参考方案8】：

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

Javascript 有一个焦点函数，如果需要，您可以使用它来设置焦点。

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

【讨论】：

是的，由于某些奇怪的原因，当我将它作为本地文件打开时，我无法选择是否使用兼容性并且它可以工作。我输入了 IIS，然后它让我选择不兼容我们，我看到了你描述的行为。诡异的 。 . .【参考方案9】：

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

正如 CodePartizan 所提到的，否则您需要将焦点放在按钮上，所以如果您切换到按钮或单击它，它似乎也对我有用。

【讨论】：

【参考方案10】：

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

我相信这不是 JS 可以解决的问题。

【讨论】：

【参考方案11】：

是的，我今天也被这个虫子咬了。不过，我找到了这个解决方法（与 OP 不同）：

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

只需从表单本身的内容重新创建表单的内容。哎呀。但它有效。 （著名的遗言……）

【讨论】：

【参考方案12】：

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

阅读更多：http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

【讨论】：

请注意，不鼓励仅链接的答案，因此答案应该是搜索解决方案的终点（相对于另一个参考中途停留，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。【参考方案13】：

我在 ie 上遇到了同样的问题，但在我读到这篇文章之前，没有任何解决方案有帮助：

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

我的表单只有一个输入字段....呵呵！ :)

【讨论】：

【参考方案14】：

找到一个可行的解决方案。

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

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

【讨论】：

以上是关于在 IE8 中输入表单中的键不起作用的主要内容，如果未能解决你的问题，请参考以下文章

为啥 unordered_multiset 对许多相等的键不起作用

标签的 Excel 用户表单加速键不起作用

多行中的cakephp外键不起作用

当我输入'vi .bash_profile'时，ESC键不起作用

HTML 表单“占位符”在 IE 8 中不起作用

为啥 PyQt 中的 keyPress 事件对 Enter 键不起作用？