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

Question

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

Answer 1

要在按下回车键时提交表单,请沿着这些行创建一个javascript函数.

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

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

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

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

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

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规范包含的语言使其工作方式与大多数浏览器已经实现它的方式相同.

Answer 4

使用<button>标签.从W3C标准:

使用BUTTON元素创建的按钮功能就像使用INPUT元素创建的按钮一样,但它们提供了更丰富的渲染可能性:BUTTON元素可能包含内容.例如,包含图像的BUTTON元素的功能类似于并且可能类似于其类型设置为"image"的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维基 <button>
• HTML5 <button>
• HTML4 <button>

我使用<button>带有css-sprites的标签和一些css样式来获得丰富多彩的功能表单按钮.请注意,可以编写css,例如,<a class="button">链接共享与<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不会太不同.catch是检查"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>