关于javascript：JSF：如何按Enter键提交表单？

JSF: How to submit the form when the enter key is pressed?

这似乎是一个简单的要求，但是我还没有找到一个简单的解决方案：

在JSF 1.2 / Richfaces 3.3 Web应用程序中，我有一个表单，其中包含各种类型的输入组件，后跟一个和<h:commandButton>。前者重置表格，第二者使用输入的数据执行某些操作。

我的目标是在用户输入数据时按下Enter键时触发此操作。我该怎么办？

编辑：通常，每个<form>我有多个<h:commandButton>。我想指定一个特定的默认动作。另外，我希望该解决方案与AJAX(我们广泛使用)配合使用。

除非您使用的是MSIE浏览器，但实际上您只有一个输入字段而没有按钮，它应该只是默认行为。否则，可能是某些(自动生成的)JS代码将其弄乱了。

如果您的表单中没有文本区域，则可以通过以下简单方法解决：

1	<h:form onkeypress="if (event.keyCode == 13) submit();">

或者如果您有textareas，并且不想在所有非textarea输入元素上重复相同的keypress函数，请在窗口加载期间运行以下脚本。

1
2
3
4
5
6
7
8
9
10
11
12
13

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

相关讨论

基于BalusC的答案，我想到了以下内容(在IE和FireFox上进行了测试)：

1	<h:form id="form" onkeypress="ifEnterClick(event, #{rich:element('searchButton')});">

其中ifEnterClick的定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/**
* 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();
}
}

编辑：由于使用Enter键从Firefox表单自动完成功能中选择一个值会触发一个keydown事件，但不会触发keypress事件，因此使用onkeypress优于onkeydown。

只需将此代码放在您的JS文件中：

1
2
3
4
5

$('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();
}
});