按下回车键时如何提交表格？

Question 1

有人可以告诉我如何在按下回车键并且表单中没有按钮时提交HTML表单吗？ 提交按钮不存在。我使用的是自定义div而不是那个。

Question 2

IMO，这是最干净的答案：

<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样式。

Question 3

要在按下Enter键时提交表单，请按照以下步骤创建一个javascript函数。

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

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

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

无论如何，这也是Internet Explorer 7的默认行为（可能也是早期版本）。

Question 4

我尝试了各种基于javascript / jQuery的策略，但始终遇到问题。当用户使用Enter键从浏览器的内置自动完成列表中进行选择时，意外提交是最新出现的问题。我终于切换到此策略，该策略似乎可以在我公司支持的所有浏览器上使用：

<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规范包含的语言可以使其以大多数浏览器已经实现的方式工作。

Question 5

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

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

基本上有另一个标签<button>，它不需要的JavaScript，也可以提交一个表单。可以使用<div>标记（包括<img />button标记内部）样式化很多样式。<input />标签中的按钮几乎没有灵活性。

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

在上设置三种类型<button>; 它们映射到<input>按钮类型。

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

标准品

我使用<button>标签CSS精灵还有一点的CSS样式以获取色彩鲜艳且功能丰富的表单按钮。请注意，可以为例如<a class="button">共享<button>元素样式链接的CSS编写CSS 。

Question 6

我相信这就是您想要的。

//<![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（）函数。如果按下的键与Enter键（13）相匹配，则将调用sendform（）并发送第一个遇到的表单。这仅适用于Firefox和其他符合标准的浏览器。

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

Question 7

这是我使用jQuery的方法

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

其他javascript也不会太不同。捕获正在检查键参数“ 13”，这是回车键

Question 8

使用以下脚本。

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

Question 9

我使用这种方法：

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

这样，我可以使用“发送”按钮或仅通过按键盘上的Enter提交此表单。

这是把戏！

Question 10

您为什么不只将div提交样式应用于提交按钮？我敢肯定有一个JavaScript的，但这会更容易。

Question 11

如果使用asp.net，则可以在表单上使用defaultButton属性。

Question 12

我认为您实际上应该有一个提交按钮或一个提交图像...您是否有使用“提交div”的特定原因？如果您只想要自定义样式，我建议<input type="image"...。http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Question 13

扩展答案，这对我有用，也许有人会觉得有用。

HTML

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

s

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

Question 14

与Chris Marasti-Georg的示例类似，只是使用内联javascript。本质上，将onkeypress添加到要使用Enter键的字段中。本示例对密码字段起作用。

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Question 15

由于display: none按钮和输入在Safari和IE中不起作用，因此我发现，最简单的方法（无需额外的JavaScript技巧）就是<button />在表单中添加一个绝对位置并将其放置在屏幕之外。

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

自2016年9月起，此功能适用于所有主要浏览器的当前版本。

显然，它建议（并且在语义上更正确）以按需设置样式<button/>。

Question 16

默认情况下，使用“自动对焦”属性可为按钮提供输入焦点。实际上，单击表单内的任何控件也可以使表单集中注意力，这是表单对RETURN作出反应的要求。因此，如果用户从未单击表单中的任何其他控件，则“自动对焦”将为您执行此操作。

因此，如果用户在单击RETURN之前从未单击任何窗体控件，则“自动对焦”将起到至关重要的作用。

但是即使这样，在没有JS的情况下仍然需要满足两个条件：

a）您必须指定要转到的页面（如果留为空白，它将无法工作）。在我的示例中，它是hello.php

b）控件必须可见。您可以想象将其移出页面以隐藏，但不能使用display：none或visible：hidden。我所做的就是使用内联样式将其从页面左移200px。我将高度设置为0px，以使其不占用空间。因为否则，它仍然可能破坏上方和下方的其他控件。或者，您也可以浮动该元素。

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>