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

【问题标题】：JSF: How to submit the form when the enter key is pressed?JSF：按下回车键时如何提交表单？
【发布时间】：2011-07-09 01:20:02
【问题描述】：

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

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

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

编辑：一般来说，每个<form> 我有不止一个<h:commandButton>。我想指定一个特定的作为默认操作。另外，我希望该解决方案能够与 AJAX（我们广泛使用）配合得很好。

【问题讨论】：

标签： javascript jsf

【解决方案1】：

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

如果表单中没有文本区域，一个简单的修复方法如下：

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

或者，如果您有 textarea，并且不想对所有非 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;
            }
        };
    }
}

【讨论】：

恐怕我忘了提及一些限制（参见我编辑的问题）。我不能依赖只有一个提交按钮（如果焦点在另一个按钮上，我绝对不想拦截按键），我们正在使用 AJAX 样式的部分渲染，这将删除事件侦听器从输入控件，不是吗？不过，这是一个很好的起点，所以请点赞:-)

【解决方案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();
    }
}

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

【讨论】：

【解决方案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();
    }
});

【讨论】：

这需要OP未提及的jQuery。
另外，我确实说过它需要使用 AJAX，它用 AJAX 响应替换部分 DOM。这将删除 jQuery 注册的所有事件处理程序。此外，当用户想要在文本区域中输入换行符时，您的解决方案将提交表单...

【解决方案4】：

回想起来，用 HTML 提供的方法解决这个问题远不那么脆弱，也更容易维护，正如以下相关问题的答案所示：

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

【讨论】：

【解决方案5】：

使用 PrimeFaces 组件：

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

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

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

【讨论】：