Javascript JSF：如何在按下回车键时提交表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5198038/
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
JSF: How to submit the form when the enter key is pressed?
提问by meriton
It would appear to be a simple requirement, but I haven't found a simple solution yet:
这似乎是一个简单的要求，但我还没有找到一个简单的解决方案：
In a JSF 1.2 / Richfaces 3.3 webapp, I have a form with input components of various types, followed by an <a4j:commandButton>and a <h:commandButton>. The former resets the form, the second performs some action with the data entered.
在 JSF 1.2 / Richfaces 3.3 webapp 中，我有一个包含各种类型的输入组件的表单，后跟一个<a4j:commandButton>和一个<h:commandButton>. 前者重置表单，后者对输入的数据执行一些操作。
My goal is to have this action triggered when the user presses the enter key while entering data. How can I do that?
我的目标是在用户输入数据时按下回车键时触发此操作。我怎样才能做到这一点？
Edit: Generally, I have more than one <h:commandButton>per <form>. I'd like to designate a particular one as default action. Also, I'd like the solution to play nice with AJAX (which we use extensively).
编辑：一般来说，我<h:commandButton>每个<form>. 我想指定一个特定的作为默认操作。此外，我希望该解决方案与 AJAX（我们广泛使用）配合得很好。
采纳答案by meriton
In retrospect, solving this problem with the means HTML provides is far less brittle and easier to maintain, as the answers to the following related question show:
回想起来，用 HTML 提供的方法解决这个问题远没有那么脆弱，也更容易维护，如以下相关问题的答案所示：
Multiple submit buttons on HTML form – designate one button as default
回答by BalusC
Unless you are using MSIE browser and in reality you've only one input field without a button, it should just be the default behaviour. Otherwise probably some (autogenerated) JS code has messed it up.
除非您使用 MSIE 浏览器并且实际上您只有一个没有按钮的输入字段，否则它应该只是默认行为。否则可能是一些（自动生成的）JS 代码把它搞砸了。
If you don't have textareas in the form, an easy fix would be the following:
如果表单中没有 textareas，一个简单的修复方法如下：
<h:form onkeypress="if (event.keyCode == 13) submit();">
Or if you have textareas and you don't want to repeat the same keypressfunctions over all non-textarea input elements, run the following script during window onload.
或者，如果您有 textarea 并且您不想keypress在所有非 textarea 输入元素上重复相同的功能，请在窗口加载期间运行以下脚本。
for (var i = 0; i < document.forms.length; i++) {
var inputs = document.forms[i].getElementsByTagName('input');
for (var j = 0; j < inputs.length; j++) {
inputs[j].onkeypress = function(e) {
e = e || window.event;
if (event.keyCode == 13) {
this.form.submit();
return false;
}
};
}
}
回答by meriton
Building on BalusC's answer I came up with the following (tested on IE and FireFox):
基于 BalusC 的回答，我想出了以下内容（在 IE 和 FireFox 上测试）：
<h:form id="form" onkeypress="ifEnterClick(event, #{rich:element('searchButton')});">
where ifEnterClick is defined by:
其中 ifEnterClick 由以下定义：
/**
* Handler for onkeypress that clicks {@code targetElement} if the
* enter key is pressed.
*/
function ifEnterClick(event, targetElement) {
event = event || window.event;
if (event.keyCode == 13) {
// normalize event target, so it looks the same for all browsers
if (!event.target) {
event.target = event.srcElement;
}
// don't do anything if the element handles the enter key on its own
if (event.target.nodeName == 'A') {
return;
}
if (event.target.nodeName == 'INPUT') {
if (event.target.type == 'button' || event.target.type == 'submit') {
if (strEndsWith(event.target.id, 'focusKeeper')) {
// inside some Richfaces component such as rich:listShuttle
} else {
return;
}
}
}
if (event.target.nodeName =='TEXTAREA') {
return;
}
// swallow event
if (event.preventDefault) {
// Firefox
event.stopPropagation();
event.preventDefault();
} else {
// IE
event.cancelBubble = true;
event.returnValue = false;
}
targetElement.click();
}
}
Edit: Since selecting a value from Firefox form auto completion using the enter key fires a keydown event, but no keypress event, using onkeypress is preferable to onkeydown.
编辑：由于使用 Enter 键从 Firefox 表单自动完成中选择一个值会触发 keydown 事件，但不会触发 keypress 事件，因此使用 onkeypress 比 onkeydown 更可取。
回答by Rajat Gupta
Just put this code in your JS file:
只需将此代码放在您的 JS 文件中：
$('input,textarea').live('keydown',function(e) { // submit forms on pressing enter while focus is on any input elmnt inside form
if (e.keyCode == 13) {
$(this).closest('form').submit();
}
});
回答by Dimitri Dewaele
Use the PrimeFaces component:
使用 PrimeFaces 组件：
<!-- Default button when pressing enter -->
<p:defaultCommand target="submit"/>
Use this in combination with a focus component and you will rock!
将它与焦点组件结合使用，你会摇滚！
<!-- Focus on first field, or first field with error -->
<p:focus context="feesboek"/>
