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并且您不想在所有非textarea输入元素上重复相同的keypress函数，请在窗口加载期间运行以下脚本。

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

将此代码放在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();
    }
});

Answer 4

使用PrimeFaces组件：

<!-- Default button when pressing enter -->
<p:defaultCommand target="submit"/>

将它与焦点组件结合使用，你会摇滚！

<!-- Focus on first field, or first field with error -->
<p:focus context="feesboek"/>

Answer 5

回想起来，使用HTML提供的方法解决这个问题远没有那么脆弱和易于维护，因为以下相关问题的答案显示：

Multiple submit buttons on HTML form – designate one button as default

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

5 个答案: