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

StackOverflow https://stackoverflow.com/questions/29943

  •  09-06-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

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。我确实使用了 CSS 样式 脱衣战士.

其他提示

要在按下 Enter 键时提交表单，请沿着这些线路创建一个 javascript 函数。

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

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

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

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

我尝试了各种基于 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 规范包含的语言使其能够以大多数浏览器已经实现的方式工作。

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

标准

我用 <button> 标签有 和一点 样式以获得丰富多彩且实用的表单按钮。请注意，可以编写 css，例如： <a class="button"> 链接与样式共享 <button> 元素。

我相信这就是你想要的。

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

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

这是我使用 jQuery 的方法

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

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

使用以下脚本。

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

对于用户按 Enter 键时应提交表单的每个字段，请调用 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>

我用这个方法：

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

基本上， 我只是添加了一个图像类型的不可见输入 （在哪里 ”垫片.gif" 是 1x1 透明 gif）。

这样，我可以使用“发送”按钮或简单地通过 按回车键 在键盘上。

这就是窍门！

为什么不直接将 div 提交样式应用到提交按钮呢？我确信有一个 javascript 可以做到这一点，但这会更容易。

如果您使用的是 asp.net，您可以使用 默认按钮 表单上的属性。

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

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

自从 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/> 如预期的。

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

因此，如果用户在按“返回”之前从未单击过任何表单控件，“自动对焦”就会产生至关重要的区别。

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

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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top