按下回车键提交表单时，如果提交按钮被隐藏，在Firefox中会起作用，在Chrome中则不会有任何反应。

Question

我有一个表单，其中包含一些输入字段和一个隐藏的提交按钮（通过style="display:none"隐藏）。

在Firefox中，当您按下回车键时，如果焦点在输入字段上，则表单将提交。

然而，在Chrome中，当您按下回车键时，什么也不会发生。我想知道如何在Chrome中添加此功能？

这是表单，请在Chrome中查看： http://jsfiddle.net/B59rV/2/

<form method="post"  action="/xxxx" accept-charset="UTF-8">

    <input type="hidden" value="SSjovFqEfRwz2vYDIsB6JRdtLAuXGmnT+tkyZnrtqEE=" name="authenticity_token">

    <div class="input text_field">
    <label>Email</label>
    <input type="text" size="30" name="user_session[email]" />
  </div>

  <div class="input text_field">
    <label>Password</label>
    <input type="password" size="30" name="user_session[password]" />
  </div>


    <input type="submit" value="Sign In" style="display: none;" >

</form>

- CafeHey

---

对我来说在Chrome中运行良好：http://jsfiddle.net/thirtydot/B59rV/ - thirtydot

嗯...看一下这个：http://jsfiddle.net/B59rV/2/ - CafeHey

Answer 1

我真的不知道为什么它在Chrome中不起作用。 我认为这是个bug。

然而，它确实与display: none有关。

我找到了一个恶心而可怕 (!!) 的解决方法：

input[type="submit"] {
    position: absolute;
    top: -1000px
}

不要隐藏它：相反，将其定位到屏幕外。

实时演示 - 在Chrome中有效。

- thirtydot

---

是的，我已经考虑过那个解决方案了，但如果实施了，我想我晚上可能睡不着觉。告诉你吧，如果一天内没有更多答案，你就可以得到大绿色勾选标记。 - CafeHey

@Smickie：我将使用一些更高曝光度的标签重新标记这个问题。我刚刚注意到你没有任何HTML/CSS/JavaScript标签。 - thirtydot

另一个“不太正规”的解决方案是什么：visibility:hidden; - Bazzz

@Bazzz：我考虑过这个，但显然会留下按钮应该在的空间：http://jsfiddle.net/TzY2F/1/ - thirtydot

可以使用visibility:hidden;position:absolute。绝对定位将其从文档流中移除，因此空间消失了。使用visibility:hidden似乎比始终看起来很奇怪的top:-1000px更好！ - marnusw

Answer 2

在Chrome 22和Firefox 18中测试过，这可能是最好的解决方法。

.hide-submit {
    position: absolute;
    visibility: hidden;
}

<button type="submit" class="hide-submit">Ok</button>

或者更通用的方式

input[type=submit].hide,
button[type=submit].hide {
    display: block;
    position: absolute;
    visibility: hidden;
}

<input type="submit" class="hide">Go</input>

这基本上是在原地隐藏元素，无需将其推出屏幕。

- Rui Gonçalves

Answer 3

最好的方法是：

<input type="submit" hidden />

例子：

<form onSubmit="event.preventDefault(); alert('logging in!')">
  <label for="email">email:</label>
  <input type="email" name="email" required />

  <label for="password">password:</label>
  <input type="password" name="password" required />

  <input type="submit" hidden />

  <p>Press enter to log in</p>
</form>

- nxtman123

Answer 4

可能是一种安全“特性”，尽管我还没有找到确切的解释。我尝试了http://jsfiddle.net/B59rV/2/，没有密码字段时，警报按预期发生。在IE8中也会出现同样的情况。这是我机器上唯一的浏览器，所以没有在其他浏览器上进行测试。

- andyb

---

“display:none;” 正是 Chrome 出现问题的根源。 - aaaaaa

Answer 5

我找到的唯一解决方法，至少和将其定位到屏幕外一样不规范的方法是 width:0; height:0; ：不知何故，Chrome 不会将其解释为隐藏元素

- aaaaaa

Answer 6

这就像Pioul的答案，但是我需要为元素执行以下操作：

position:absolute; //this helps the "hidden" element not disrupt the layout
width:0;
height:0;
// For <= IE7 a 1px piece of the form element still shows
// hide it with opacity=0; Tested element was input:file.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

未测试

这只是另一种方法，但我认为这并不比被接受的答案好多少。

- Minimul

---

不透明度只是虚拟地隐藏了按钮，但它仍然可以被点击。这是一个糟糕的解决方案。 - 18C