按回车键提交表单而无需提交按钮

Question

我正在尝试通过按下回车键来提交表单，但不显示提交按钮。如果可能的话，我不想涉及JavaScript，因为我希望所有浏览器都能正常工作（我知道的唯一的JS方法是使用事件）。

目前表单看起来像这样：

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

这个解决方案运行得很好。当用户按下回车键时，提交按钮可以起作用，并且在Firefox、IE、Safari、Opera和Chrome中不会显示该按钮。然而，我仍然不喜欢这个解决方案，因为很难知道它是否能够在所有平台的所有浏览器上工作。

有人能提出更好的方法吗？或者说，这已经是最好的方法了吗？

- PythonPower

---

在CSS中，你可以省略零长度测量单位的单位。0像素、0点、0字母等都可以简写为0，这样可以减少代码量并且通常可以被压缩工具自动处理。 - pwdst

@pwdst 感谢您指出这一点 - 我来自Python世界，所以“显式优于隐式”，我真的想知道在CSS中是否也是如此，或者CSS创建者有不同的习语？ - ericmjl

在这里零是规则的例外，@ericmjl - 0px == 0em == 0% == 0vh == 0vh等。在其他（非零）长度测量中，不仅是不良实践，而且违反标准，不指定单位会导致用户代理（浏览器）的行为不同。请参见 https://developer.mozilla.org/en-US/docs/Web/CSS/length 和 https://drafts.csswg.org/css-values-3/#lengths。 - pwdst

如有疑问，请明确使用长度单位。换句话说，如果不确定，请加上明确的长度单位。 - pwdst

虽然在数学抽象范畴中，添加零单位肯定不会有任何问题，但是没有单位也应该是百分之百有效的，无论是哪种语言。与此相反，拥有或没有单位的一个方便用途就是传达信息，即给定属性是否“真正意味着为0，并且一直保持为0”（无单位），还是“那个东西现在恰好是零，但可以根据需要进行调整；或者其他……”（带有单位）。 - Sz.

作为评论添加，因为它并没有真正回答问题，但是对于任何人来说，表单的默认行为是仅在有一个输入时才在按下Enter键时提交。如果超过一个输入，则需要一个提交按钮。 - divillysausages

Answer 1

更新于2022年：使用此替代方案

<input type="submit" hidden />

---

注意 - 过时的回答
请不要在2021年及以后使用position: absolute。建议改用hidden属性。否则，请往下查看并选择更好、更现代的答案。

尝试：

<input type="submit" style="position: absolute; left: -9999px"/>

那会将按钮推到屏幕左侧，甚至超出屏幕。好处是当CSS失效时，你也能优雅地降级。

更新 - 解决IE7问题

如Bryan Downing所建议的，加上tabindex以防止Tab键到达该按钮（由Ates Goral提供的解决方法）：

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

- Ates Goral

---

在IE7中尝试了此解决方案，结果与Erebus相同。以下代码可修复：position: absolute; width: 1px; height: 1px; left: -9999px; - Bryan Downing

多么可怕的黑客:(为什么HTML本来就是这样的呢?在这种情况下回车键不起作用有好的理由吗? - nornagon

如果你觉得这种黑客方式很可怕，随时可以提出一个不那么可怕的建议。HTML就是它的样子... - Ates Goral

@MooseFactory tabindex="-1" - Ates Goral

“好的事情是……当CSS被禁用时，它可以优雅地降级”。我的意思是，确实，这很有效，但“优雅降级”只是营销策略。直到我在这个来自2002年的页面中发现它，我甚至都没有听说过它。没错，在第一页谷歌搜索“浏览器禁用CSS”时，唯一的结果要追溯到10年前（或者考虑到这篇回答是2009年发布的，则为7年前）。 - Vicky Chijwani

Answer 2

我认为你应该选择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>

- strager

---

不错，经过测试效果良好。但在尝试类似操作之前，请记住，通过Javascript提交表单可能导致某些浏览器无法提供密码保存的功能。 - andyk

这将导致提交按钮在页面加载并运行JS之前出现一会儿。 - nornagon

当用户在输入邮箱地址时，如果从浏览器的自动完成列表中选择了一个之前输入过的地址并按下回车键，这也会触发按键事件。这将导致表单被提交，而这不是用户所期望的结果。请注意修改。 - cburgmer

我将从keypress更改为keydown以获得更广泛的支持，但如果你希望支持Chrome，你还需要在if之前添加e.preventDefault();。 - Campbeln

@Campbeln 你可能可以使用 .on('keypress'...)。.on() 的文档似乎已经为你执行了 .preventDefault() 方法。 - jinglesthula

Answer 3

你试过这个了吗？

<input type="submit" style="visibility: hidden;" />

因为大多数浏览器都理解visibility:hidden，而且它的工作方式并不像display:none，所以我猜应该没问题。我自己还没有真正测试过，如有错误请指出。

- andyk

---

关于 "visibility: hidden"，有一点需要注意：就像你在w3schools上所看到的，"visibity:none" 仍会影响布局。如果你想避免这种空白区域，那么我认为使用绝对定位的解决方案更好。 - loybert

您可以将两个解决方案结合起来：<input type="submit" style="visibility: hidden; position: absolute;" /> - VaclavSir

该死，这在IE8中不起作用（它不会提交表单），因此上面的解决方案获胜：position: absolute; left: -100px; width: 1px; height: 1px; - VaclavSir

Answer 4

没有提交按钮的另一种解决方案：

HTML

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

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

});

- damoiser

---

奇怪的技巧。你可以将按钮变成文本框！但由于这个技巧适用于所有浏览器，我已经给你信誉！ - Jenna Leaf

感谢@JennaLeaf ;-) 无论如何，我认为这并不奇怪 - 很多在线表单使用按下键盘触发提交。一个例子可能是谷歌搜索栏（也许他们没有使用完全相同的代码，但可能是类似的）。 - damoiser

Answer 5

对于未来查看此回答的任何人，HTML5 实现了一种新的表单元素属性 hidden，它会自动将 display:none 应用于您的元素。

例如：

<input type="submit" hidden />

- Panomosh

---

虽然它似乎可以在桌面版Chrome上运行，但在iPhone的Chrome或Safari上似乎无法正常工作。 - Ulf Adams

@UlfAdams 它可以在 iPhone 12.1.2 上的 Chrome 和 Safari 上运行。 - Matthew Campbell

很不幸，在Safari 14.2 (macOS)中仍然无法正常工作。 - fabb

这样做可以正确地隐藏提交按钮，但会禁用“按回车键提交”。有人知道这个的浏览器兼容性吗？查看https://caniuse.com/hidden并没有提供太多信息。 - jlhasson

Answer 6

使用以下代码，这个代码修复了我在三个浏览器（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"/>

以正确的名称和值在您的代码中添加以上行作为第一行。

- Mayank Gupta

Answer 7

只需将hidden属性设置为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>

- jumpnett

---

隐藏属性将禁用按回车键提交表单。 - 66Ton99

@66Ton99 只是在火狐浏览器中测试。它不会禁用提交。 - Eugen Konkov

“it works on my machine” ;) 有很多浏览器，不仅仅是 Firefox。可以说，人们可能需要一个可靠的跨浏览器解决方案。 - Félix Adriyel Gagnon-Grenier

适用于Chrome 63。 - piotr_cz

目前在iPhone的Chrome或Safari浏览器上无法正常工作。 - Ulf Adams

Answer 8

最优雅的做法是保留提交按钮，但将其边框、填充和字体大小设置为0。

这将使按钮尺寸为0x0。

<input type="submit" style="border:0; padding:0; font-size:0">

你可以自己尝试，通过为元素设置轮廓线，你会看到一个点，这是“围绕”0x0像素元素的外部边框。

不需要使用visibility:hidden，但如果这让你晚上睡得更安心，你也可以将其加入混合中。 JS Fiddle

- Waltur Buerk

Answer 9

与其使用当前隐藏按钮的hack方式，将visibility: collapse;设置在style属性中会更简单。然而，我仍然建议使用一点简单的Javascript来提交表单。据我所知，现在对于此类事情的支持是无处不在的。

- Noldorin

---

Safari将visibility: collapse解释为visibility: hidden，因此按钮仍会导致白色区域：https://caniuse.com/mdn-css_properties_visibility_collapse - fabb

哎呀，这太糟糕了。苹果需要整顿一下自己的东西。不仅违反了标准，而且也违背了单词的直观含义。 - Noldorin

Answer 10

HTML5解决方案

<input type="submit" hidden />

- iamandrewluca

---

与上述相同 - 在iPhone的Chrome或Safari上不起作用。 - Ulf Adams