jQuery 提交 HTML 表单上的 Enter 键而不是激活按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8294465/
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
Making Enter key on an HTML form submit instead of activating button
提问by andygeers
I have an HTML form with a single submitinput, but also various buttonelements. When the user presses the 'enter' key, I'd expect it to actually submit the form, but instead (within Chrome 15 at least) I'm finding that it's triggering the first button(since that occurs earlier in the HTML than the submitinput, I guess).
我有一个带有单个submit输入的 HTML 表单，但也有各种button元素。当用户按下“输入”键时，我希望它实际提交表单，但相反（至少在 Chrome 15 中）我发现它触发了第一个button（因为在 HTML 中比submit输入更早发生， 我猜）。
I know that in general you can't force browsers to favour a particular submitinput, but I really thought they would favour submitinputs over buttonelements. Is there a small tweak I can make to the HTML to make this work, or am I going to have to embrace some kind of Javascript approach?
我知道一般来说你不能强迫浏览器偏爱特定的submit输入，但我真的认为他们会偏爱submit输入而不是button元素。是否可以对 HTML 进行一些小调整以使其工作，或者我将不得不采用某种 Javascript 方法？
Here's a rough mockup of the HTML:
这是 HTML 的粗略模型：
<form action="form.php" method="POST">
<input type="text" name="field1"/>
<button onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>
</form>
回答by Jesús Carrera
You don't need JavaScript to choose your default submit button or input. You just need to mark it up with type="submit", and the other buttons mark them with type="button". In your example:
您不需要 JavaScript 来选择默认提交按钮或输入。你只需要用 标记它type="submit"，其他按钮用 标记它们type="button"。在你的例子中：
<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>
回答by Ofir Farchy
You can use jQuery:
您可以使用 jQuery：
$(function() {
$("form input").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button[type=submit] .default').click();
return false;
} else {
return true;
}
});
});
回答by david
Try this, if enter key was pressed you can capture it like this for example, I developed an answer the other day html button specify selected, see if this helps.
试试这个，如果按下了输入键，你可以像这样捕获它，例如，我前几天开发了一个答案html button specified selected，看看这是否有帮助。
Specify the forms name as for example yourFormNamethen you should be able to submit the form without having focus on the form.
例如指定表单名称，yourFormName那么您应该能够提交表单而无需关注表单。
document.onkeypress = keyPress;
function keyPress(e){
var x = e || window.event;
var key = (x.keyCode || x.which);
if(key == 13 || key == 3){
// myFunc1();
document.yourFormName.submit();
}
}
回答by Mike Wells
I just hit a problem with this. Mine was a fall off from changing the inputto a buttonand I'd had a badly written />tag terminator:
我只是遇到了这个问题。我的是一个从改变脱落input到一个button和我有写的不好的/>标签终止：
So I had:
所以我有：
<button name="submit_login" type="submit" class="login" />Login</button>
And have just amended it to:
并刚刚将其修改为：
<button name="submit_login" type="submit" class="login">Login</button>
Now works like a charm, always the annoying small things... HTH
现在就像一个魅力，总是烦人的小事情...... HTH
回答by samehanwar
$("form#submit input").on('keypress',function(event) {
event.preventDefault();
if (event.which === 13) {
$('button.submit').trigger('click');
}
});
回答by Darren
Given there is only one (or with this solution potentially not even one) submit button, here is jQuery based solution that will work for multiple forms on the same page...
鉴于只有一个（或者这个解决方案可能没有一个）提交按钮，这里是基于 jQuery 的解决方案，适用于同一页面上的多个表单......
<script type="text/javascript">
$(document).ready(function () {
var makeAllFormSubmitOnEnter = function () {
$('form input, form select').live('keypress', function (e) {
if (e.which && e.which == 13) {
$(this).parents('form').submit();
return false;
} else {
return true;
}
});
};
makeAllFormSubmitOnEnter();
});
</script>
回答by Flanamacca
I just gave this a whirl in both Chrome and Firefox and IE10.
我只是在 Chrome、Firefox 和 IE10 中试了一下。
As mentioned above - make sure that you have marked up with type = "button", "reset", "submit" etc to ensure that it correctly cascades and chooses the correct button.
如上所述 - 确保您已使用 type = "button"、"reset"、"submit" 等进行标记，以确保它正确级联并选择正确的按钮。
Perhaps also setting all of them to have the same form (ie all as that worked for me)
也许还将所有这些都设置为具有相同的形式（即所有对我有用的形式）
