JSF：如何在按下回車鍵時提交表單？

Question

這似乎是一個簡單的要求，但我還沒有找到一個簡單的解決方案：

在JSF 1.2 / Richfaces 3.3 webapp中，我有一個包含各種類型的輸入組件的表單，后跟一個<a4j:commandButton>和一個<h:commandButton> 。 前者重置表單，第二個對輸入的數據執行一些操作。

我的目標是在用戶輸入數據時按下回車鍵時觸發此操作。 我怎樣才能做到這一點？

編輯 ：一般來說，每個<form>我有多個<h:commandButton> <form> 。 我想指定一個特定的默認操作。 此外，我希望解決方案與AJAX（我們廣泛使用）相得益彰。

Answer 1

除非您使用的是MSIE瀏覽器，並且實際上您只有一個沒有按鈕的輸入字段，它應該只是默認行為。 否則可能一些（自動生成的）JS代碼搞砸了。

如果表單中沒有textareas，則可以通過以下方式輕松解決：

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

或者，如果您有textareas並且您不想在所有非textarea輸入元素上重復相同的keypress功能，請在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

只需將此代碼放入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提供的方法解決這個問題遠沒有那么脆弱和易於維護，因為以下相關問題的答案顯示：

HTML表單上的多個提交按鈕 - 默認指定一個按鈕