当提交按钮被隐藏时，通过点击return来提交表单;在Firefox中工作，在Chrome中什么都不做。

I have a form with some input fields and a hidden submit button (hidden via style="display:none").

我有一个表单，有一些输入字段和一个隐藏的提交按钮(隐藏的通过样式="display:none")。

When you hit the return key when an input field is focused in Firefox, the form submits.

当输入字段集中在Firefox中时，单击返回键，表单就会提交。

However in Chrome, when you hit return, nothing happens. I was wondering, how do you add this functionality back to Chrome?

但是在Chrome中，当你点击返回时，什么都不会发生。我在想，你怎么把这个功能添加回Chrome呢?

Here's the form, take a look at it in Chrome: http://jsfiddle.net/B59rV/2/

这是表单，请在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>

5 个解决方案

#1

I have literally no idea why it's not working in Chrome. I think it's a bug.

我真的不知道为什么它在Chrome不工作。我认为这是一个bug。

However, it is somehow to do with that display: none.

然而，这与显示无关。

I found a nasty, horrible (!!) workaround:

我发现了一个讨厌的，可怕的(!!)

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

Don't hide it: instead, position it off the screen.

不要隐藏它:相反，把它放在屏幕之外。

Live Demo - works in Chrome.

现场演示-工作在铬。

#2

Tested in Chrome 22 and Firefox 18 perhaps this is the best workaround

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

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

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

Or a more generic way

或者更一般的方式

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

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

This basically hides the element in plain sight, no need to push it outside the screen

这基本上是将元素隐藏在肉眼可见的地方，不需要将它推到屏幕之外

#3

Probably a security "feature", although I haven't found a definitive explanation yet. I tried http://jsfiddle.net/B59rV/2/ without the password field and the alert occurs as expected. Same thing happens in IE8 for what it's worth. Those are the only browsers I have on this machine, so haven't tested on any others.

可能是一个安全“特性”，尽管我还没有找到一个明确的解释。我尝试了http://jsfiddle.net/B59rV/2/，没有密码字段，警报按预期发生。同样的事情也发生在IE8中。这些是我在这台机器上仅有的浏览器，所以还没有在其他机器上测试过。

#4

The only workaround i found, at least as dirty as positioning it out of the screen, is width:0; height:0; : somehow, Chrome doesn't interpret it like a hidden element

我找到的唯一解决办法是宽度:0;高度:0;不知何故，Chrome并不像一个隐藏的元素那样解释它。

#5

This is like Pioul's answer but I needed to do the following for a input[type=file] element:

这类似于Pioul的答案，但是我需要为输入[type=file]元素做以下操作:

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);

NOT tested with input[type=text]

不测试的输入(type =文本)

Just another approach but I don't think this is much better than the accepted answer.

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

#1