javascript 当提交按钮被隐藏时，通过按回车来提交表单；在 Firefox 中工作，在 Chrome 中什么都不做
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5225201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submitting a form by hitting return when the submit button is hidden; works in Firefox, does nothing in Chrome
提问by MintDeparture
I have a form with some input fields and a hidden submit button (hidden via style="display:none").
我有一个包含一些输入字段和隐藏提交按钮的表单（通过 style="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>
回答by thirtydot
I have literally no idea why it's not working in Chrome. I think it's a bug.
我真的不知道为什么它在 Chrome 中不起作用。我认为这是一个错误。
However, it issomehow to do with that display: none.
然而，这在某种程度上与那个有关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.
现场演示- 适用于 Chrome。
回答by Rui Gon?alves
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
这基本上隐藏了元素，无需将其推到屏幕外
回答by andyb
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 中，因为它的价值。这些是我在这台机器上仅有的浏览器，所以还没有在其他任何浏览器上进行测试。
回答by Pioul
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
我发现的唯一解决方法，至少与将其放置在屏幕外一样脏，是width:0; height:0;：不知何故，Chrome 不会将其解释为隐藏元素
回答by Minimul
This is like Pioul's answer but I needed to do the following for a input[type=file]element:
这就像 Pioul 的答案，但我需要为input[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]
未使用input[type=text]进行测试
Just another approach but I don't think this is much better than the accepted answer.
只是另一种方法，但我认为这并不比公认的答案好多少。
回答by nxtman123
The best way to do this is:
最好的方法是：
<input type="submit" hidden/>
Example:
例子：
<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>