当按下回车键时，我该如何提交表单？

Question

当按下回车键时，如何提交HTML表单，如果表单中没有按钮？ 提交按钮不在那里。我使用自定义的div代替它。

- Niyaz

Answer 1

当按下回车键时提交表单，请创建一个类似这样的JavaScript函数。

function submitFormOnEnter(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("myForm").submit(); } }

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

然后将事件添加到您需要的任何范围中，例如在 div 标签上：

<div onKeyPress="return checkSubmit(event)"/>

这也是 Internet Explorer 7 的默认行为（可能也适用于早期版本）。

- John Hunter

---

看起来 Firefox 的弹出窗口拦截器捕捉到了这个 =|。 - John

我更喜欢使用“keyup”，这样按住回车键不会多次触发。 - Justin Skiles

不错，但是你应该使用 event.which 而不是 e.keyCode。这是我用过的方法：var charCode = (typeof event.which == "number") ? event.which : event.keyCode; if(charCode == 13){ this.handleSubmit(event); } - CoronelV

Answer 2

这是最干净的答案：

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

更好的是，如果您正在使用JavaScript来使用自定义div提交表单，您还应该使用JavaScript来创建它，并在按钮上设置display:none样式。这样，禁用JavaScript的用户仍然可以看到提交按钮并点击它。

---

据观察，使用display:none会导致IE忽略输入框。我创建了一个新的JSFiddle示例，开始时是一个标准表单，然后通过渐进增强的方式隐藏提交按钮并创建新的div。我使用了StriplingWarrior的CSS样式。

- Chris Marasti-Georg

---

上述方法在IE中无法使用。IE会忽略隐藏的提交按钮。 - Chuck Phillips

@ChuckPhillips 答案已更新为新的示例，应该在IE中也可以正常工作。 - Chris Marasti-Georg

我在Safari（5.1.2）中尝试过这个，但它不起作用。我仍然停留在同一页上。我尝试移除“display:none”样式。然后它就起作用了！似乎Safari需要提交按钮可见。 - user213265

即使在Chrome版本19.0.1084.56中也无法工作 - 提交按钮需要可见才能工作。请查看下面StriplingWarrior的答案，其中包含可靠的修复方法，适用于Chrome、Safari和IE。 - user2398029

Answer 3

我尝试了各种基于JavaScript/jQuery的策略，但是一直存在问题。最新出现的问题涉及用户使用回车键从浏览器内置的自动完成列表中进行选择时意外提交表单。最终，我转而采用这种策略，它似乎在我们公司支持的所有浏览器上都可以工作：

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

这与Chris Marasti-Georg目前被接受的答案类似，但通过避免使用display: none，似乎可以在所有浏览器上正常工作。

更新

我编辑了上面的代码，包括一个负tabindex，以便它不会捕获Tab键。虽然在HTML 4中技术上无法验证，但HTML5规范包含使其按照大多数浏览器已经实现的方式工作的语言。

- StriplingWarrior

Answer 4

使用<button>标签。根据W3C标准：

使用BUTTON元素创建的按钮与使用INPUT元素创建的按钮具有相同的功能，但BUTTON元素提供了更丰富的渲染可能性：BUTTON元素可以包含内容。例如，包含图像的BUTTON元素的功能类似于并且可能类似于将类型设置为“image”的INPUT元素，但BUTTON元素类型允许包含内容。

基本上还有另一个标签<button>，它不需要JavaScript，也可以提交表单。它可以像<div>标签一样进行样式设置（包括在按钮标签内部使用<img />）。与<input />标签创建的按钮相比，<button>标签的灵活性更高。

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

有三种类型可以设置在上；它们对应于按钮类型。

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

标准

• W3C关于<button>的维基页面
• HTML5 <button>
• HTML4 <button>

我使用<button>标签与css-sprites和一些css样式来获得丰富多彩且功能齐全的表单按钮。请注意，可以为<a class="button">链接编写css样式，与<button>元素共享样式。

- Joel Purra

Answer 5

我相信这就是你想要的内容。

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

每次按键时，函数enter()将被调用。如果按下的键与回车键(13)匹配，则会调用sendform()并发送第一个遇到的表单。这仅适用于Firefox和其他符合标准的浏览器。

如果您发现此代码有用，请务必为我投票支持！

- Hawk

---

如果用户想在提交表单之前使用Shift + Enter换行，怎么办？ - Gaʀʀʏ

Answer 6

这是我使用jQuery的方法：

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

其他JavaScript并不会有太大的区别。关键是检查keypress参数是否为“13”，这是回车键。

- Sean Chambers

---

我在我的代码中使用了@Sean的答案，除此之外，我发现我还必须捕获e.which == 10。 - travis

Answer 7

请使用以下脚本。

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

对于每个应在用户按回车键时提交表单的字段，请按以下方式调用submitenter函数。

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

- Bill the Lizard

Answer 8

我使用这种方法：

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

基本上，我只是添加了一个不可见的图像输入框（其中“spacer.gif”是1x1透明gif），通过这种方式，我可以使用“发送”按钮或仅通过键盘上的“回车”提交此表单。这就是诀窍！

- Niente

---

问题是如何在不显示提交按钮的情况下提交表单。 - Marco Demaio

对于大多数实际目的而言，1像素的gif图像是“不显示提交按钮”的。如果这种方法无法完成工作，最好记录一下这种解决方案的问题所在。 - Steve

Answer 9

延伸之前的答案，这是对我有效的方法，或许有人会觉得有用。

Html

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

- f_i

Answer 10

为什么不把 div 提交样式应用到提交按钮上呢？我相信有一个 JavaScript 可以实现这个功能，但那样会更容易一些。

- Ross

---

我也遇到了同样的问题，使用的是jQUery UI按钮。使用这些小部件时，您可以选择为按钮添加一个漂亮的小图标（如果您喜欢，甚至可以添加2个）。但是，如果您使用input标记作为提交按钮，则此选项将不起作用。因此，您必须使用a，span或div。 - Pierre Henry