当您有多个表单时，IE8 不会在输入时提交答案

【问题标题】：IE8 won`t submit on enter when you have multiple forms当您有多个表单时，IE8 不会在输入时提交
【发布时间】：2010-10-24 19:32:45
【问题描述】：

如果您有 3 个表单（如下所示）并且您将其中两个表单设置为不显示（display:none;）并且您使用 javascript 来切换每个表单，当您设置它们时，这些表单被设置为隐藏可见，您尝试按 Enter 提交表单，它不会提交。

如果第一个表单默认可见，则唯一提交的表单。

这适用于 ie7 和 ie6，但不适用于 ie8（如图）

我正在使用 jquery 来隐藏和显示我的表单，但这应该不是问题。我也尝试过使用不同的 css 规则（如可见性：隐藏），但仍然是同样的问题；

<a href="" onclick="$('#form1').show();$('#form2').hide();$('#form3').hide();">form1</a>
  <a href="" onclick="$('#form1').hide();$('#form2').show();$('#form3').hide();">form2</a>
  <a href="" onclick="$('#form1').hide();$('#form2').show();$('#form3').hide();">form3</a> 

<div id="form1">
      <form method="get"  action="test1/" >
        <input type="text" name="text1" id="text1" />
        <input type="text" name="text2" id="text2" />
        <input type="text" name="text3" id="text3" />
        <input type="submit" name="submit1"  value="submit1"/>
      </form>
  </div>

<div id="form2" >
<form method="get" action="test2/" style="display:none" >
<input type="text" name="text4" id="text4" />
<input type="text" name="text5" id="text5" />
<input type="text" name="text6" id="text6" />
<input type="submit" name="submit2"  value="submit2"/>
</form>
</div>

<div id="form3" >
  <form method="get" action="test3/" style="display:none" >
      <input type="text" name="text7" id="text7" />
      <input type="text" name="text8" id="text8" />
      <input type="text" name="text9" id="text9" />
      <input type="submit" name="submit3"  value="submit3"/>
  </form>
</div>

【问题讨论】：

我假设您已确保其中一个表单输入在按 Enter 时具有焦点？
只是想知道，为什么您的表单包含三个具有相同名称和 id 的文本字段，这是行不通的，您正在寻找类（我认为）。
相同的名称是可以的（除非您使用 PHP 并且想要使用 $_POST/GET/REQUEST）。但是，在 HTML（和 XHTML）中禁止使用相同的 id。
我已将所有文本框 ID 更改为唯一 ID，但我仍然得到相同的结果。是的，当我按下回车键时，我确实确保其中一个文本框处于焦点位置。

标签： javascript html css internet-explorer-8

【解决方案1】：

我看到您正在使用 jQuery - 您可能可以按照以下方式做一些事情

$(function() {  // execute when document ready
  $("input").keyup(function(e) {
    if (e.keyCode==13) { // enter 
      var form = $(this).parents("form").get(0); // first <form> tag that is a parent.
      if (form) form.submit();
      return e.preventDefault(); // stop it from activating in other browsers.
    }
  });
});

这应该确保当您点击输入时表单提交。

【讨论】：

如果你有一个自动完成下拉菜单，这个解决方案不会的唯一原因。当您按 Enter 从下拉列表中选择一个项目时..它只会提交表单。在某些情况下你不希望这样

【解决方案2】：

恐怕我这里没有 IE 8 可供测试，但您可以尝试不同的 CSS 属性作为解决方法：

<style type="text/css">
.hide {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
</style>

<a href="" onclick="$('#form1').removeClass('hide');$('#form2').addClass('hide');$('#form3').removeClass('hide');">form1</a>
<a href="" onclick="$('#form1').addClass('hide');$('#form2').removeClass('hide');$('#form3').addClass('hide');">form2</a>
<a href="" onclick="$('#form1').addClass('hide');$('#form2').removeClass('hide');$('#form3').addClass('hide');">form3</a>

这将具有与display: none; 相同的视觉效果。

【讨论】：