Javascript 按 Enter 时未提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4196681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form not submitting when pressing enter
提问by Dutchie432
I have the following HTML/JS/jQuery Code. This code represents a login form that is presented modally to the user to allow them to login. The problem is, when I hit enter, the form does not seem to execute the "onsubmit" event. When I click the button as the bottom of the form (which has virtually the same code as the onsubmit event), it works perfectly. I am wondering if anyone can tell me why this form isn't submitting..? Any assistance would be appreciated.
我有以下 HTML/JS/jQuery 代码。此代码表示以模态方式呈现给用户以允许他们登录的登录表单。问题是，当我按回车键时，表单似乎没有执行“onsubmit”事件。当我单击表单底部的按钮时（它的代码几乎与 onsubmit 事件相同），它运行良好。我想知道是否有人可以告诉我为什么这个表格没有提交..？任何援助将不胜感激。
jQuery Code to Show Login Modal:
显示登录模式的 jQuery 代码：
showDivAndFocus('loginModal','loginaccount');
function showDivAndFocus(v,t){
if (api)
if (api.isOpened)
api.close();
api = $('#'+v).overlay({
mask: {color: '#000000'},
top:'0px',
api: true,
autoScrollToActive: false,
autoScrollOffset: 0
}).load();
document.getElementById(t).focus();
}
HTML Code
HTML代码
<div class="modal" id="loginModal">
<h2>User Login</h2>
<br />
<form action="javascript:void(0);" onsubmit="return(doLogin());" name="loginForm" id="loginForm">
<table width="95%" cellpadding="4" cellspacing="4">
<tr>
<td class="regw" align="left"><b>Account Number:</b></td>
<td class="regw" align="left"><input type="text" maxlength="10" size="10" name="loginaccount" id="loginaccount" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Username:</b></td>
<td class="regw" align="left"><input type="text" maxlength="20" size="20" name="loginusername" id="loginusername" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Password:</b></td>
<td class="regw" align="left"><input type="password" maxlength="20" size="20" name="loginpassword" id="loginpassword" /></td>
</tr>
<tr>
<td class="regw" align="left"><b>Remember Me:</b></td>
<td class="regw" align="left"><input type="checkbox" name="loginremember" id="loginremember" /></td>
</tr>
<tr><td colspan="2">
<div>
<center>
<table><tr><td width="50" valign="middle">
<div id="loginLoading" style="height:24px;width:24px;"></div>
</td><td>
<button onclick="doLogin();" type="button" class="ok">Submit</button>
</td><td>
<button onclick="api.close();" type="button" class="cancel">Cancel</button>
</td><td width="50"> </td></tr></table>
</center>
</div>
</td></tr>
</table>
</form>
</div>
AJAX Call
AJAX 调用
function doLogin(){
var ajax = getXmlObject();
var f = getFormVariables();
var url= '/login.php?f=' + encodeURIComponent(f);
if (ajax.readyState == 4 || ajax.readyState == 0) {
ajax.open("POST", url, true);
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
var a = ajax.responseText;
if (a=="OK"){...} else {...}
}
};
ajax.send(null);
}
return false;
}
采纳答案by g.d.d.c
You have two choices:
你有两个选择：
- Create an event handler for the enter button and add it to your bindings.
- Use an
<input type=submit>in the form somewhere, which is what gets the automatic Enter Key behavior you're after.
- 为回车按钮创建一个事件处理程序并将其添加到您的绑定中。
<input type=submit>在表单中的某处使用 an ，这就是您所追求的自动 Enter Key 行为的原因。
回答by Aaron Wallentine
I was struggling with this same issue; one of my forms was submitting when pressing "enter" in the text fields with no problem; another, similar, form on the same page wouldn't submit at all, for the life of me.
我也在为同样的问题苦苦挣扎；我的一个表单在文本字段中按“输入”时提交，没有问题；在我的一生中，同一页上的另一个类似的表单根本不会提交。
Neither field had a submit button, and neither was using javascript to do any submission.
两个字段都没有提交按钮，也没有使用 javascript 进行任何提交。
What I found, is that when there is only a single text field in a form, pressing 'enter' in the text field will automatically submit; but if there is more than one (regular (i.e. single-line) text input) field, it does nothing, unless there is also some kind of 'submit' button.
我发现，当表单中只有一个文本字段时，在文本字段中按“输入”会自动提交；但是如果有多个（常规（即单行）文本输入）字段，它什么也不做，除非还有某种“提交”按钮。
Apparently this is part of the HTML 2.0 specification:
显然这是HTML 2.0 规范的一部分：
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
当表单中只有一个单行文本输入字段时，用户代理应该在该字段中接受 Enter 作为提交表单的请求。
An old, but apparently still valid, and interesting, further discussion here.
... evidently meant as a convenient way to submit simple queries, but reducing the risk, on a complex form, of prematurely submitting it while trying to fill it in. Numerous browser implementers (e.g Netscape, Opera, various versions of Lynx,...) followed this advice, though it seems with slightly different interpretations.
...显然是一种提交简单查询的便捷方式，但降低了在复杂表单上尝试填写时过早提交的风险。许多浏览器实现者（例如 Netscape、Opera、Lynx 的各种版本，。 ..) 遵循了这个建议，尽管它的解释似乎略有不同。
I made a JSFiddle to demonstrate. As far as I can tell (lazily just testing with Chrome), the form will submit on "Enter" if there's only one text field, or if there's a submit button, even if it's hidden.
我制作了一个 JSFiddle 来演示. 据我所知（只是懒惰地用 Chrome 测试），如果只有一个文本字段，或者如果有一个提交按钮，即使它是隐藏的，表单也会在“Enter”时提交。
(EDIT: I later found that it also does seem work if there are other input fields which are not a regular, single-line text input ... e.g., textareas, selects, etc. -- thanks to @user3292788 for that information. Updated the JSFiddle to reflect this).
（编辑：我后来发现，如果还有其他不是常规单行文本输入的输入字段，它似乎也有效……例如，textareas、selects 等——感谢@user3292788 提供的信息。更新了 JSFiddle 以反映这一点）。
<h2>Form with one text field only, no submit button</h2>
<p>Seems to submit automatically when pressing 'enter' in the first text field</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
</div>
</form>
<h2>Form with two text fields, no submit button</h2>
<p>Won't submit when pressing 'enter' in the forms ...</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
</div>
</form>
<h2>Form with two text fields and a submit button ...</h2>
<p>Now it submits with 'enter' key</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
<input type="submit" />
</div>
</div>
</form>
<h2>Form with two text fields and a HIDDEN submit button ...</h2>
<p>Seems to work, even with submit hidden ...</p>
<form action="" method="post">
<div>
<label for="pt-search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
<input type="submit" />
</div>
</div>
</form>
<h2>Form with no action or method attribute, HIDDEN submit button ...</h2>
<p>Even this seems to work.</p>
<form>
<div>
<label for="search-input">Search</label>
<div>
<input name="term" type="text" placeholder="Example: budapest amsterdam" />
<input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
<input type="submit" />
</div>
</div>
</form>
<h2>Form with multiple fields, but only one text input, no submit button.</h2>
<p>This seems to work as well.</p>
<form action="" method="post">
<p><input type="text" ></p>
<textarea name="" id="" cols="30" rows="10"></textarea>
<p>
<select name="" id="">
<option value="">Value</option>
</select>
</p>
</form>
回答by DColl
It can also come from a javascript bind to a <button>in your form. For exemple, if you have
它也可以来自 javascript 绑定到<button>表单中的 a。例如，如果你有
<button id='button'>Reset</button>
<span id="textToReset">some info</span>
<script type="text/javascript">
$('#button').bind('click', function(){
$('#textToReset').text('');
return false;
})
</script>
Your Enter button will be caught somewhere by the return falseand your form won't submit under Enter key. The correct way is to specify that the <button>ACT as a button. This way :
您的 Enter 按钮将被 捕获，return false并且您的表单不会在 Enter 键下提交。正确的方法是将<button>ACT指定为一个按钮。这边走 ：
<button id='button' type="button">Reset</button>
and drop the return falseyou've putted there to prevent that button from submitting a form. ;-)
并放下return false您放置在那里的 ，以防止该按钮提交表单。;-)
For the sake of learning, <button>type is by default submit. If you want them to act as control for your form, you must specify the type="button"or type="reset"See w3.org about it
为了学习，<button>type默认是submit。如果您希望它们充当表单的控件，则必须指定type="button"或type="reset"请参阅 w3.org 了解它
回答by Workion
If you have correct input-submit-button but use (click) event on that button, it will not trigger it on enter. It will submit form but not trigger click event on button, obviously. Putting functionality to form itself and it's submit event will make it work.
如果您有正确的输入提交按钮，但在该按钮上使用 (click) 事件，则不会在输入时触发它。显然，它会提交表单但不会触发按钮上的点击事件。将功能置于形式本身及其提交事件将使其工作。
回答by yaba
Just in case someone makes the same mistake as me and also comes here looking for an answer:
以防万一有人和我犯同样的错误，也来这里寻找答案：
If you have two(or more) submit buttons1in your form, hitting enter will only trigger the first submit and not the second.
如果您的表单中有两个（或更多）提交按钮1，按 Enter 键只会触发第一次提交，而不会触发第二次提交。
1as indicated by @paul-daoust in his comment on the answer of @g-d-d-c: Both <input type=submit>and <button type=submit>will work as a submit button
1，通过@保罗- daoust在他的评论中指出的@gddc的答案：两个<input type=submit>和<button type=submit>将作为一个提交按钮
