JSF: How to submit the form when the enter key is pressed?

Question

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).

BalusC · Answer 1 · 2011-03-15T18:16:25.613

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

I'm afraid I forgot to mention some constraints (c.f. my edited question). I can't rely on there being only one submit button (and I definitely don't want to intercept the keypress if the focus is on another button), and we're using AJAX-style partial rendering, which would remove the event listeners from the input controls, wouldn't it? Nevertheless, that's a good starting point, so have an upvote :-) — meriton, Mar 04 '11 at 19:54

meriton · Answer 2 · 2011-03-15T17:29:13.980

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.

score 2 · Answer 3 · answered Oct 04 '12 at 05:30

2

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

answered Oct 04 '12 at 05:30

Rajat Gupta

25,853
63
179
294

3

This requires jQuery which is unmentioned by the OP. – BalusC Oct 04 '12 at 13:13
Also, I did say it needed to work with AJAX, which replaces parts of the DOM with the AJAX response. This will remove any event handlers registered by jQuery. Moreover, your solution would submit the form when a user wants to enter a line break in the text area ... – meriton Oct 04 '12 at 18:52

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

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

edited May 23 '17 at 12:22

Community

1
1

answered Oct 26 '12 at 16:30

meriton

68,356
14
108
175

score 1 · Answer 5 · answered Mar 12 '15 at 10:13

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"/>

JSF: How to submit the form when the enter key is pressed?

5 Answers5