Html 在没有提交按钮的情况下按 Enter 提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/477691/
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 pressing enter without a submit button
提问by
Well I am trying to submit a form by pressing enter but not displaying a submit button. I don't want to get into JavaScript if possible since I want everything to work on all browsers (the only JS way I know is with events).
好吧，我正在尝试通过按 Enter 键提交表单，但不显示提交按钮。如果可能的话，我不想使用 JavaScript，因为我希望所有内容都能在所有浏览器上运行（我知道的唯一 JS 方法是使用事件）。
Right now the form looks like this:
现在表格看起来是这样的：
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>
Which works pretty well. The submit button works when the user presses enter, and the button doesn't show in Firefox, IE, Safari, Opera and Chrome. However, I still don't like the solution since it is hard to know whether it will work on all platforms with all browsers.
这很好用。提交按钮在用户按下 Enter 键时起作用，并且该按钮不会在 Firefox、IE、Safari、Opera 和 Chrome 中显示。但是，我仍然不喜欢该解决方案，因为很难知道它是否适用于所有浏览器的所有平台。
Can anyone suggest a better method? Or is this about as good as it gets?
任何人都可以提出更好的方法吗？或者这就是它得到的那样好？
采纳答案by Ates Goral
Try:
尝试：
<input type="submit" style="position: absolute; left: -9999px"/>
That will push the button waaay to the left, out of the screen. The nice thing with this is, you'd get graceful degradation when CSS is disabled.
这会将按钮推向左侧，离开屏幕。这样做的好处是，当 CSS 被禁用时，你会得到优雅的降级。
Update - Workaround for IE7
更新 - IE7 的解决方法
As suggested by Bryan Downing + with tabindexto prevent tab reach this button (by Ates Goral):
正如 Bryan Downing + 所建议的那样，tabindex以防止标签到达此按钮（由 Ates Goral）：
<input type="submit"
style="position: absolute; left: -9999px; width: 1px; height: 1px;"
tabindex="-1" />
回答by strager
I think you shouldgo the Javascript route, or at least I would:
我认为你应该走 Javascript 路线，或者至少我会：
<script type="text/javascript">
// Using jQuery.
$(function() {
$('form').each(function() {
$(this).find('input').keypress(function(e) {
// Enter pressed?
if(e.which == 10 || e.which == 13) {
this.form.submit();
}
});
$(this).find('input[type=submit]').hide();
});
});
</script>
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" />
</form>
回答by andyk
Have you tried this ?
你试过这个吗？
<input type="submit" style="visibility: hidden;" />
Since most browsers understand visibility:hiddenand it doesn't really work like display:none, I'm guessing that it should be fine, though. Haven't really tested it myself, so CMIIW.
由于大多数浏览器都可以理解visibility:hidden并且它不像 那样真正工作display:none，我猜它应该没问题，不过。我自己还没有真正测试过，所以 CMIIW。
回答by damoiser
Another solution without the submit button:
没有提交按钮的另一种解决方案：
HTML
HTML
<form>
<input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>
jQuery
jQuery
$(document).ready(function() {
$('.submit_on_enter').keydown(function(event) {
// enter has keyCode = 13, change it if you want to use another button
if (event.keyCode == 13) {
this.form.submit();
return false;
}
});
});
回答by Panomosh
For anyone looking at this answer in future, HTML5 implements a new attribute for form elements, hidden, which will automatically apply display:noneto your element.
对于将来查看此答案的任何人，HTML5 为表单元素实现了一个新属性hidden，它将自动应用于display:none您的元素。
e.g.
例如
<input type="submit" hidden />
回答by Mayank Gupta
Use following code, this fixed my problem in all 3 browsers (FF, IE and Chrome):
使用以下代码，这解决了我在所有 3 个浏览器（FF、IE 和 Chrome）中的问题：
<input type="submit" name="update" value=" Apply "
style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
hidefocus="true" tabindex="-1"/>
Add above line as a first line in your code with appropriate value of name and value.
将上面的行添加为代码中的第一行，并使用适当的 name 和 value 值。
回答by Noldorin
Instead of the hack you currently use to hide the button, it would be much simpler to set visibility: collapse;in the style attribute. However, I would still recommend using a bit of simple Javascript to submit the form. As far as I understand, support for such things is ubiquitous nowadays.
与您目前用来隐藏按钮的 hack 不同visibility: collapse;，在 style 属性中设置会简单得多。但是，我仍然建议使用一些简单的 Javascript 来提交表单。据我了解，如今对此类事情的支持无处不在。
回答by Waltur Buerk
The most elegant way of doing this is to keep the submit-button, but set it's border, padding and font-size to 0.
最优雅的方法是保留提交按钮，但将其边框、填充和字体大小设置为 0。
This will make the button dimensions 0x0.
这将使按钮尺寸为 0x0。
<input type="submit" style="border:0; padding:0; font-size:0">
You can try this yourself, and by setting an outline to the element you will see a dot, which is the outside border "surrounding" the 0x0 px element.
您可以自己尝试一下，通过为元素设置轮廓，您将看到一个点，它是“围绕”0x0 px 元素的外边框。
No need for visibility:hidden, but if it makes you sleep at night, you can throw that in the mix as well.
不需要可见性：隐藏，但如果它让你在晚上睡觉，你也可以把它混在一起。
回答by jumpnett
Just set the hidden attribute to true:
只需将隐藏属性设置为 true：
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" hidden="true" />
</form>
回答by Winston Tamblyn
IE doesn't allow pressing the ENTER key for form submission if the submit button is not visible, and the form has more than one field. Give it what it wants by providing a 1x1 pixel transparent image as a submit button. Of course it will take up a pixel of the layout, but look what you have to do to hide it.
如果提交按钮不可见，并且表单有多个字段，则 IE 不允许按 ENTER 键提交表单。通过提供 1x1 像素透明图像作为提交按钮来满足它的需求。当然，它会占用布局的一个像素，但看看你需要做什么来隐藏它。
<input type="image" src="img/1x1trans.gif"/>
