JSF:如何在按下回车键时提交表单？

Question

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

在JSF 1.2/Richfaces 3.3 webapp中,我有一个表单,其中包含各种类型的输入组件,后跟一个<a4j:commandButton>和一个<h:commandButton>.前者重置表单,第二个对输入的数据执行一些操作.

我的目标是在用户输入数据时按下回车键时触发此操作.我怎样才能做到这一点？

编辑:一般来说,<h:commandButton>每个人有一个以上<form>.我想指定一个特定的默认操作.此外,我希望解决方案与AJAX(我们广泛使用)相得益彰.

Answer 1

除非您使用的是MSIE浏览器,并且实际上您只有一个没有按钮的输入字段,它应该只是默认行为.否则可能一些(自动生成的)JS代码搞砸了.

如果表单中没有textareas,则可以通过以下方式轻松解决:

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

或者,如果您有textareas并且您不想keypress在所有非textarea输入元素上重复相同的函数,请在window onload期间运行以下脚本.

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

Answer 2

在BalusC的回答基础上,我想出了以下内容(在IE和FireFox上测试过):

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

其中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();
    }
}

编辑:由于使用回车键从Firefox表单自动完成中选择一个值会触发keydown事件,但是没有按键事件,使用onkeypress比onkeydown更好.

Answer 3

回想起来，使用 HTML 提供的方法解决这个问题要简单得多，并且更容易维护，如以下相关问题的答案所示：

\n\n

HTML 表单 \xe2\x80\x93 上的多个提交按钮将一个按钮指定为默认按钮

\n