由于隐藏按钮，Enter 无法在 IE 中提交表单

Posted 2023-03-11

【中文标题】由于隐藏按钮，Enter 无法在 IE 中提交表单

【英文标题】：Enter does not submit form in IE because of hidden button

【发布时间】：2010-08-23 09:14:36

【问题描述】：

我有一个带有两个按钮的表单。第一个是使用 javascript 隐藏的。

当我在 IE 的文本字段中按 Enter 键时，表单没有提交。我认为这是因为它选择了第一个按钮作为默认提交按钮，但由于该按钮被隐藏它不起作用。

我已通过在 enter keydown Javascript 事件上提交表单来解决此问题。但是，如果用户按下回车键从浏览器的自动完成下拉菜单中选择一个项目，这也会提交表单。

如何在不影响自动完成功能的情况下在 IE 中输入时提交表单？

【问题讨论】：

你为什么有一个隐藏的按钮？

当 Javascript 打开时，当用户从列表框中选择一个值时，表单会自动提交，并且按钮被隐藏。当Javascript关闭时，用户可以在选择一个值后使用按钮提交表单。

我发现这个问题的答案是对实际 Web 开发的绝妙洞察...

【参考方案1】：

尝试使用以下类隐藏按钮：

.hidden-element 
  width: 0px;
  height: 0px;
  position: absolute;
  top: -99999px;
  left: -99999px;

【讨论】：

给一个 1 岁以上的帖子添加答案有点晚了，虽然已经有一个接受的答案..

@Charlie 我不同意。其他人可能会发现此特定评论很有帮助。

【参考方案2】：

几年前我们遇到了类似的问题，AFAIR，我们在表单的开头添加了一个附加按钮，当在 IE 中按下 enter 时，它总是执行默认的提交操作。通过给它一个 1x1 透明图像，该按钮可以“几乎隐藏”。

【参考方案3】：

我通过不透明度 0 修复它，例如：

<input type="submit" style="width: 0px; height: 0px; opacity: 0;" id="submitBtn" name="submitBtn">

【参考方案4】：

您可以通过以下方式添加其他按钮以保留提交按钮功能：

<![CDATA[<!--[if IE]>]]>
                <input type="text" style="display: none;" disabled="disabled" size="1" />
            <![CDATA[<![endif]-->]]>