javascript - JSF: How to submit the form when the enter key is pressed? - Stack Overflow

admin管理员组

文章数量:1185661

It would appear to be a simple requirement, but I haven't found a simple solution yet:

In a JSF 1.2 / Richfaces 3.3 webapp, I have a form with input components of various types, followed by an <a4j:commandButton> and a <h:commandButton>. The former resets the form, the second performs some action with the data entered.

My goal is to have this action triggered when the user presses the enter key while entering data. How can I do that?

Edit: Generally, I have more than one <h:commandButton> per <form>. I'd like to designate a particular one as default action. Also, I'd like the solution to play nice with AJAX (which we use extensively).

It would appear to be a simple requirement, but I haven't found a simple solution yet:

In a JSF 1.2 / Richfaces 3.3 webapp, I have a form with input components of various types, followed by an <a4j:commandButton> and a <h:commandButton>. The former resets the form, the second performs some action with the data entered.

My goal is to have this action triggered when the user presses the enter key while entering data. How can I do that?

Edit: Generally, I have more than one <h:commandButton> per <form>. I'd like to designate a particular one as default action. Also, I'd like the solution to play nice with AJAX (which we use extensively).

• javascript
• jsf

Share Improve this question Follow edited Mar 4, 2011 at 19:45 meriton asked Mar 4, 2011 at 18:57 meritonmeriton 70.6k1414 gold badges116116 silver badges188188 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 10

Unless you are using MSIE browser and in reality you've only one input field without a button, it should just be the default behaviour. Otherwise probably some (autogenerated) JS code has messed it up.

If you don't have textareas in the form, an easy fix would be the following:

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

Or if you have textareas and you don't want to repeat the same keypress functions over all non-textarea input elements, run the following script during 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;
            }
        };
    }
}

Building on BalusC's answer I came up with the following (tested on IE and FireFox):

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

where ifEnterClick is defined by:

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

Edit: Since selecting a value from Firefox form auto completion using the enter key fires a keydown event, but no keypress event, using onkeypress is preferable to onkeydown.

Just put this code in your JS file:

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

In retrospect, solving this problem with the means HTML provides is far less brittle and easier to maintain, as the answers to the following related question show:

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

Use the PrimeFaces component:

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

Use this in combination with a focus component and you will rock!

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

本文标签： javascriptJSF How to submit the form when the enter key is pressedStack Overflow