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

Can someone please tell me how to submit an HTML form when the return key is pressed and if there are no buttons in the form? The submit button is not there. I am using a custom div instead of that.

请告诉我如何在按下回车键时提交HTML表单，如果表单中没有按钮?提交按钮不在那里。我使用的是自定义div。

13 个解决方案

#1

IMO, this is the cleanest answer:

国际海事组织，这是最干净的答案:

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

Better yet, if you are using javascript to submit the form using the custom div, you should also use javascript to create it, and to set the display:none style on the button. This way users with javascript disabled will still see the submit button and can click on it.

更好的是，如果您使用javascript来使用自定义div提交表单，那么您还应该使用javascript创建它，并设置显示:按钮上没有样式。这样，禁用javascript的用户仍然可以看到提交按钮，并可以单击它。

---

It has been noted that display:none will cause IE to ignore the input. I created a new JSFiddle example that starts as a standard form, and uses progressive enhancement to hide the submit and create the new div. I did use the CSS styling from StriplingWarrior.

已经注意到显示:没有人会导致IE忽略输入。我创建了一个新的JSFiddle示例，它以标准形式开始，并使用渐进式增强来隐藏提交和创建新div。

#2

To submit the form when the enter key is pressed create a javascript function along these lines.

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

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

Then add the event to whatever scope you need eg on the div tag:

然后将事件添加到您需要的任何范围(如div标签):

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

< div onKeyPress = "返回checkSubmit(事件)" / >

This is also the default behaviour of Internet Explorer 7 anyway though (probably earlier versions as well).

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

#3

I tried various javascript/jQuery-based strategies, but I kept having issues. The latest issue to arise involved accidental submission when the user uses the enter key to select from the browser's built-in auto-complete list. I finally switched to this strategy, which seems to work on all the browsers my company supports:

我尝试了各种基于javascript/ jquerybase的策略，但我一直有问题。当用户使用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;
}

This is similar to the currently-accepted answer by Chris Marasti-Georg, but by avoiding display: none, it appears to work correctly on all browsers.

这与Chris marastig - georg目前接受的答案类似，但避免显示:没有，它在所有浏览器上都能正常工作。

Update

I edited the code above to include a negative tabindex so it doesn't capture the tab key. While this technically won't validate in HTML 4, the HTML5 spec includes language to make it work the way most browsers were already implementing it anyway.

我将上面的代码编辑为包含一个负的tabindex，这样它就不会捕获tab键。虽然这种技术在HTML 4中是无法验证的，但是HTML5规范包括了使其工作的语言，大多数浏览器都已经实现了它。

#4

Use the <button> tag. From the W3C standard:

使用 <按钮> 标记。从W3C标准:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

按钮创建的按钮就像用INPUT元素创建的按钮一样，但是它们提供了更丰富的呈现可能性:按钮元素可能有内容。例如，一个按钮元素包含一个图像函数，类似于一个输入元素，它的类型设置为“image”，但是按钮元素类型允许内容。

Basically there is another tag, <button>, which requires no javascript, that also can submit a form. It can be styled much in the way of a <div> tag (including <img /> inside the button tag). The buttons from the <input /> tag are not nearly as flexible.

基本上还有另一个标签，，不需要javascript，也可以提交表单。它可以在

标记的方式(包括在按钮标签内的 )中设置很多样式。来自 标签的按钮不太灵活。

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

There are three types to set on the <button>; they map to the <input> button types.

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

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

Standards

标准

• W3C wiki about <button>
• W3C wiki关于 <按钮>
• HTML5 <button>
• HTML5 <按钮>
• HTML4 <button>
• HTML4 <按钮>

I use <button> tags with css-sprites and a bit of css styling to get colorful and functional form buttons. Note that it's possible to write css for, for example, <a class="button"> links share to styling with the <button> element.

我使用 <按钮> 标签与css-精灵和一些css样式，以得到丰富多彩的和功能的表单按钮。请注意，可以编写css，例如， 链接共享与元素的样式。

#5

I believe this is what you want.

我相信这就是你想要的。

//<![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();
}
//]]>

Every time a key is pressed, function enter() will be called. If the key pressed matches the enter key (13), then sendform() will be called and the first encountered form will be sent. This is only for Firefox and other standards compliant browsers.

每当按下一个键，函数enter()将被调用。如果按键按下enter键(13)，则会调用sendform()，并发送第一个遇到的表单。这只适用于Firefox和其他兼容标准的浏览器。

If you find this code useful, please be sure to vote me up!

如果你觉得这段代码有用，请一定投我一票!

#6

Here is how I do it with jQuery

下面是我使用jQuery的方法。

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

Other javascript wouldnt be too different. the catch is checking for keypress argument of "13", which is the enter key

其他的javascript不会太大。catch是检查“13”的按键参数，这是enter键。

#7

Use the following script.

使用下面的脚本。

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

For each field that should submit the form when the user hits enter, call the submitenter function as follows.

对于每个在用户点击进入时提交表单的字段，调用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>

#8

I use this method:

我用这个方法:

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

Basically, I just add an invisible input of type image (where "spacer.gif" is a 1x1 transparent gif).

基本上，我只是添加了一个不可见的输入类型图像(其中“间隔”)。gif是1x1的透明gif。

In this way, I can submit this form either with the 'send' button or simply by pressing enter on the keyboard.

通过这种方式，我可以通过“发送”按钮来提交这个表单，或者只需按下键盘上的enter键即可。

This is the trick!

这是关键!

#9

Why don't you just apply the div submit styles to a submit button? I'm sure there's a javascript for this but that would be easier.

为什么不直接将div提交样式应用到提交按钮呢?我确定这里面有一个javascript，但这更简单。

#10

If you are using asp.net you can use the defaultButton attribute on the form.

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

#11

I think you should actually have a submit button or a submit image... Do you have a specific reason for using a "submit div"? If you just want custom styles I recommend <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

我认为你应该有一个提交按钮或者提交图片…您是否有使用“提交div”的具体原因?如果你想自定义样式我推荐< input type = "图像" ....http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

#12

Similar to Chris Marasti-Georg's example, instead using inline javascript. Essentially add onkeypress to the fields you want the enter key to work with. This example acts on the password field.

类似于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>

#13

Since display: none buttons and inputs won't work in Safari and IE, I found that the easiest way, requiring no extra javascript hacks, is to simply add an absolutely positioned <button /> to the form and place it far off screen.

因为显示:在Safari和IE中，没有任何按钮和输入不能工作，我发现最简单的方法，不需要额外的javascript技巧，只需在表单上添加一个绝对定位的 <按钮 />，并将其放置到远离屏幕的地方。

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

This works in the current version of all major browsers as of September 2016.

这适用于截至2016年9月的所有主流浏览器的当前版本。

Obviously its reccomended (and more semantically correct) to just style the <button/> as desired.

显然，它的reccomended(以及更多语义上的正确)只是按需要的样式设置。