Default action to execute when pressing enter in a form

by

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.

More Related Contents:

  1. commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
  2. Differences between action and actionListener
  3. Invoke JSF managed bean action on page load
  4. Execution order of events when pressing PrimeFaces p:commandButton
  5. Pure Java/JSF implementation for double submit prevention
  6. Creating FacesMessage in action method outside JSF conversion/validation mechanism?
  7. What can , and be used for?
  8. Sometimes I see JSF URL is *.jsf, sometimes *.xhtml and sometimes /faces/*. Why?
  9. CSRF, XSS and SQL Injection attack prevention in JSF
  10. h:commandButton/h:commandLink does not work on first click, works only on second click
  11. Spawning threads in a JSF managed bean for scheduled tasks using a timer
  12. How to inject @EJB, @PersistenceContext, @Inject, @Autowired, etc in @FacesConverter?
  13. Internationalization in JSF, when to use message-bundle and resource-bundle?
  14. Pass an object between @ViewScoped beans without using GET params
  15. Obtaining Facelets templates/files from an external filesystem or database
  16. How to upload file using JSF 2.2 ? Where is the saved File?
  17. PrimeFaces CSS look’n’feel missing and JS “Uncaught Reference Error: PrimeFaces is not defined”
  18. Make multiple dependent / cascading selection components in JSF
  19. Submit form on pressing Enter with AngularJS
  20. How to make number input area initially empty instead of 0 or 0.00?
  21. How to programmatically send POST request to JSF page without using HTML form?
  22. Purpose of the h:outputLabel and its “for” attribute
  23. How can I set id of a component/tag inside ui:repeat
  24. How to create a custom Facelets tag?
  25. Getting ViewExpiredException in clustered environment while state saving method is set to client and user session is valid
  26. JSF 2 and Post/Redirect/Get?
  27. p:dataExporter does not recognize p:cellEditor
  28. Customize FacesServlet to get rid of .xhtml extension
  29. JSF redirect to other page
  30. Is Facelets page generated to Servlet as JSP generated to Servlet

Leave a Comment