Default action to execute when pressing enter in a form

I found a way which is less hacky and works well. The idea is a hidden commandButton.

Unfortunately display:none style cannot be used because then the commandButton will be ignored. visibility:hidden is not good because it keeps the component's space reserved.

But we can fine tune the style so the size of its visual appearance will be zero with the following CSS:

.zeroSize {
    visibility: hidden;
    padding: 0px;
    margin: 0px;
    border: 0px;
    width: 0px;
    height: 0px;
}

And now all it takes is:

<h:commandButton value="" action="#{bean.save}" class="zeroSize" />

This will result in an invisible command button which according to the first-next-submit-button rule can be activated.

This is not specific to JSF. This is specific to HTML. The HTML5 forms specification section 4.10.22.2 basically specifies that the first occuring <input type="submit"> element in the "tree order" in same <form> as the current input element in the HTML DOM tree will be invoked on enter press.

There are basically two workarounds:

• Use JavaScript to capture the enter key press and invoke the desired button.

    <h:form onkeypress="if (event.keyCode == 13) { document.getElementById('formid:saveid').click(); return false; }">
  

  If you have textareas in the form, you'd like to put the JS on all non-textarea input elements instead of on the form. See also Prevent users from submitting a form by hitting Enter.

  ---

• Swap the buttons in HTML and use CSS floats to swap them back.

    <div style="width: 100px; clear: both;">
        <h:commandButton action="#{bean.save}" value="Save" style="float: right;" />
        <h:commandButton action="#{bean.reset}" value="Reset" style="float: left;" />
    </div>
  

  It may only require some pixel finetuning. Of course put CSS in its own .css file; using style is poor practice, the above example is for brevity.

  ---

If you happen to use PrimeFaces, since 3.2 you can use <p:defaultCommand> to declaratively identify the button which should be invoked when pressing enter key within the form.

<h:form>
    <p:defaultCommand target="save" />
    ...
    <h:commandButton id="reset" action="#{bean.reset}" value="Reset" />
    <h:commandButton id="save" action="#{bean.save}" value="Save" />
</h:form>

It's under the covers using JavaScript for that which attaches a keydown listener to the parent <h:form> which in turn checks if the enter key is pressed in a non-textarea/button/link element, and then invokes click() on the target element. Basically the same as 1st mentioned workaround in this answer.

To hide elements you can use css: style="visibility: hidden"

To change the default action if you use primefaces, you can use: <p:defaultCommand target="yourButtonDefault" /> For example:

<h:form id="form">

    <h:panelGrid columns="3" cellpadding="5">
        <h:outputLabel for="name" value="Name:" style="font-weight:bold"/>
        <p:inputText id="name" value="#{defaultCommandBean.text}" />
        <h:outputText value="#{defaultCommandBean.text}" id="display" />
    </h:panelGrid>

    <p:commandButton value="Button1" id="btn1" actionListener="#{defaultCommandBean.btn1Submit}" ajax="false"/>
    <p:commandButton value="Button2" id="btn2" actionListener="#{defaultCommandBean.btn2Submit}" />
    <h:commandButton value="Button3" id="btn3" actionListener="#{defaultCommandBean.btn3Submit}" />

    <p:defaultCommand target="btn3" />

</h:form>

Source: Primefaces new component: DefaultCommand

Following BalusC's recommendation to solve the problem using JavaScript, I wrote some jQuery code to do the job:

$(function(){
  $('form').on('keypress', function(event){
    if(event.which === 13 && $(event.target).is(':input')){
        event.preventDefault();
        $('#save').trigger('click');
    }
  });
});

CodePen: http://codepen.io/timbuethe/pen/AoKJj