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

有人可以告诉我如何提交一个HTML表单,当返回键被按下,如果表单中没有button? 提交button不在那里 。 我正在使用自定义的div而不是。

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

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

按下Enter键时提交表单按照这些行创build一个javascript函数。

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

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

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

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

我尝试了各种基于javascript / jQuery的策略,但我一直有问题。 当用户使用回车键从浏览器的内置自动完成列表中select时,最近出现的问题涉及意外提交。 我终于切换到这个策略,这似乎在我公司支持的所有浏览器上都能正常工作:

 <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中进行validation,但是HTML5规范包含了语言,使其能够以大多数浏览器已经实现的方式工作。

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

使用BUTTON元素创build的button就像使用INPUT元素创build的button一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。 例如,包含图像的BUTTON元素的function类似于INPUT元素,其types设置为“image”,但BUTTON元素types允许内容。

基本上还有另一个标签, <button> ,它不需要javascript ,也可以提交表单。 它可以用<div>标签(包括button标签内的<img /> )来devise。 来自<input />标签的button几乎没有灵活性。

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

<button>上有三种types的设置。 他们映射到<input>buttontypes。

 <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关于<button>
  • HTML5 <button>
  • HTML4 <button>

我使用css-sprites和一些css样式的<button>标签来获得丰富多彩的function表单button。 请注意,可以为例如<a class="button">使用<button>元素链接共享样式来编写css。

以下是我如何使用jQuery

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

其他的JavaScript不会太不同。 catch是检查keypress参数“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> 

对于在用户input时应提交表单的每个字段,请按如下所示调用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> 

我相信这是你想要的。

 //<![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()。 如果按下的键与input键(13)相匹配,则会调用sendform(),并发送第一个遇到的表单。 这仅适用于Firefox和其他符合标准的浏览器。

如果你觉得这个代码有用,请务必把我投给!

我用这个方法:

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

基本上, 我只是添加一个不可见的inputtypes的图像 (其中“ spacer.gif ”是一个1×1透明gif)。

通过这种方式,我可以使用“发送”button或简单地按下键盘上的回车来提交此表单。

这是诀窍!

你为什么不把div提交样式应用到提交button? 我敢肯定,这有一个JavaScript,但会更容易。

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

我认为你应该有一个提交button或提交图像…你有使用“提交div”的具体原因? 如果你只是想自定义样式,我build议<input type="image"... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

与Chris Marasti-Georg的例子类似,使用内联javascript。 本质上,将onkeypress添加到您希望input键使用的字段。 这个例子作用于密码字段。

 <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: nonebutton和input在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月,这在所有主stream浏览器的当前版本中都可以使用。

很显然,它的build议(更正确的说法)只是根据需要devise<button/>样式。