按下返回键时如何提交表单？

Question

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

Answer 1

要在按下 enter 键时提交表单，请按照这些行创建一个 javascript 函数。

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

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

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

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

Answer 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 忽略输入。我创建了一个new JSFiddle example，它以标准形式开始，并使用渐进增强来隐藏提交并创建新的 div。我确实使用了 StriplingWarrior 的 CSS 样式。

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，因此它不会捕获制表键。虽然这在技术上无法在 HTML 4 中验证，但 HTML5 规范包含的语言使其能够以大多数浏览器已经实现的方式工作。

Answer 4

使用<button> 标签。来自 W3C 标准：

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

基本上还有另一个标签<button>，它不需要javascript，也可以提交表单。它可以以<div> 标签的方式进行样式化（包括按钮标签内的<img />）。 <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>

标准

• W3C wiki about <button>
• HTML5 <button>
• HTML4 <button>

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

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 和其他符合标准的浏览器。

如果您觉得此代码有用，请务必给我投票！

Answer 6

这是我使用 jQuery 的方法

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

其他 javascript 不会有太大的不同。问题是检查“13”的按键参数，即回车键

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>

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

这样，我可以使用“发送”按钮或简单地通过按键盘上的回车键来提交此表单。

这就是诀窍！

Answer 9

为什么不直接将 div 提交样式应用于提交按钮？我确定有一个 javascript 来解决这个问题，但这会更容易。

Answer 10

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

Answer 11

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

Answer 12

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

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

Answer 13

类似于 Chris Marasti-Georg 的示例，而是使用内联 javascript。 基本上将 onkeypress 添加到您希望输入键使用的字段。此示例作用于密码字段。

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

Answer 14

由于display: none 按钮和输入在 Safari 和 IE 中不起作用，我发现最简单的方法，即不需要额外的 javascript hack，就是简单地将绝对定位的 <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/> 的样式。

Answer 15

默认情况下，使用“autofocus”属性可以将输入焦点赋予按钮。事实上，单击表单中的任何控件也会将焦点放在表单上，​​这是表单对 RETURN 做出反应的要求。因此，如果用户从未点击过表单中的任何其他控件，“自动对焦”就会为您执行此操作。

因此，如果用户在点击 RETURN 之前从未点击过任何表单控件，那么“自动对焦”会产生至关重要的影响。

但即便如此，在没有 JS 的情况下，仍然需要满足 2 个条件：

a) 你必须指定一个页面去（如果留空它不会工作）。在我的示例中是 hello.php

b) 控件必须是可见的。您可以想象将其移出页面以隐藏，但您不能使用 display:none 或 visibility:hidden。 我所做的是使用内联样式将其从页面左侧移出 200 像素。我将高度设置为 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>