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

IT技术 javascript html
2021-03-06 11:19:34

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

6个回答

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

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

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

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

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

我更喜欢“keyup”,这样按住回车键的行为不会多次触发。
2021-04-18 11:19:34
看起来firefoxes弹出窗口拦截器捕获了这个=|。
2021-04-19 11:19:34
很好,但你应该使用event.which而不是 e.keyCode。这是对我有用的方法: var charCode = (typeof event.which == "number") ? event.which : event.keyCode; if(charCode == 13){ this.handleSubmit(event); }
2021-04-20 11:19:34

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

上述方法在 IE 中不起作用。IE 忽略隐藏的提交按钮。
2021-04-22 11:19:34
在 Chrome 版本 19.0.1084.56 中也不起作用 - 提交按钮需要可见才能工作。有关适用于 Chrome、Safari 和 IE 的可靠修复,请参阅下面的 StriplingWarrior 的回答。
2021-04-28 11:19:34
我在 Safari (5.1.2) 中试过这个,但它不起作用。我只是停留在同一页面上。我尝试删除“显示:无”样式。它奏效了!似乎 Safari 需要提交按钮可见。
2021-05-04 11:19:34
@ChuckPhillips 答案已更新为一个新示例,该示例也应该在 IE 中正常工作。
2021-05-05 11:19:34

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

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

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

如果用户想在提交表单之前移动输入一个新行怎么办?
2021-05-02 11:19:34