How to submit a form when the return key is pressed?

前端未结

关注

 15  978

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

相关标签:

15条回答

梦毁少年i

2020-11-28 04:53
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.

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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
春和景丽

2020-11-28 04:53
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'>  
</form>
```
Basically, I just add an invisible input of type image (where "spacer.gif" is a 1x1 transparent gif).

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

This is the trick!
0 讨论(0)
发布评论:

提交评论
- 加载中...
你的背包

2020-11-28 04:54

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

太阳男子

2020-11-28 05:03

Extending on the answers, this is what worked for me, maybe someone will find it useful.

Html

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

0 讨论(0)

旧时难觅i

2020-11-28 05:03

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.

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

0 讨论(0)

孤城傲影

2020-11-28 05:04
To submit the form when the enter key is pressed create a javascript function along these lines.
```
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 onKeyPress="return checkSubmit(event)"/>

This is also the default behaviour of Internet Explorer 7 anyway though (probably earlier versions as well).
0 讨论(0)
发布评论:

提交评论
- 加载中...