PrimeFaces disable submit on pressing enter key

Question

PrimeFaces disable submit on pressing enter key.

I’m, running PrimeFaces 5.1 running on WildFly 8.2 Final.

I have dialog, with two inputNumbers and two butt

Answer 1

As the answer referenced by Nimnio says, this is specific to HTML and browsers.

I consider this behavior to be inappropriate when using PrimeFaces. I prefer to disable it globally, for all forms like this:

$('form').off('keypress.disableAutoSubmitOnEnter').on('keypress.disableAutoSubmitOnEnter', function(event) {
    if (event.which === $.ui.keyCode.ENTER && $(event.target).is(':input:not(textarea,:button,:submit,:reset)')) {
        event.preventDefault();
    }
});

The target check allows the other default behaviors to work, like adding a line break in a textarea by pressing Enter.

To take into account new ajaxically added forms you'll need to call the above script after every AJAX request. There are multiple ways to do that, such as a <script> in a p:outputPanel autoUpdate="true", or calling a function in a p:ajaxStatus's oncomplete callback.

If this solution is not appropriate for some reason then consider the more localized one:

<h:form onsubmit="return false;">

Returning false here disables the non-AJAX default submit.

Answer 2

It is default browser behavior to hunt a form for jQuery(":submit") elements and trigger the first listed on the form, when the enter key is pressed.

this will look strange on debugger, because if you have a function such as onclick="handle(event);".

You go to the text field, hit enter, and you will see an "artifical" onclick event with being passed to your primary submit action for that form.

The surest way to be in-control of what happens, I would say, is not by means of onkeypress as explained above. I found that to not work in all cases. On soame cases the form onkeypress simply does not get triggered, and you do not have then the opportunity to return flase; / event.preventDefault();. I am not 100% sure of all cases that justfied the onkeypress not getting triggered, but I suspect framework code preventing event bubbling in some instances.

Ultimately, what is really happening is your form is being submitted by your browser default behavior on ENTER withing input text field. It is not the bubling of the event to the form that submits the form. That is the flaw of trying to handle the event on the form and preventing default behavior there. That might just be too late. And this is very easy to verify. If you tune youe inpu text and onkeypress always to event.preventDefault(). (A) you kill the textbox no text gets written on the texbox (B) The event still bubles up, but the browser does not submit the form anyway. So the most important element of all is: where is the browser aiming at when it acts with the default behavior?

So what you can decide instead is that what you will take control of where the browser unleashes its default behavior. You can direct it to a dummy button.

This is the one and only one mechanism I have found to be really reliable to be in control of what happens when you hit enter on a text field withing a form is to have on that form a well known artifical button, e.g.:

<input type="submit" onclick"return false;" style="border:none; background-color: #myAppBrackgroundColor;" />

You get the idea, to make sure that the submit event is being routed by the browser to a button under your control.

You have to be careful, IE in particular is quirky. If not for IE, you could simply style your button as display: none. Because of IE, the browser will route the default submit action to a visible submit button, if one exists. Therefore, your button cannot be in display none. You have to make it logically visible, but phsysically invisible. For that you supress the border and give it an appropriate background for your application.

This method is 100% reliable.

Answer 3

I used following solution:

<h:form onsubmit="return false;">

This prevents form submit. It works well only in case if you have ajax only behavior on this form.

Answer 4

Putting a dummy/hidden button before the one you want to stop works best for me

<p:commandButton style="visibility: hidden;"/> <!-- dummy hidden button to stop keyPress from firirng submit -->

Answer 5

I think you use JavaScript to capture the enter key press and do nothing.

<h:form onkeypress="if (event.keyCode == 13) { return false; }">

Ref: https://stackoverflow.com/a/5486046/201891

return false; cancels an event across browsers if called at the end of an event handler attribute in the HTML. This behaviour is not formally specified anywhere as far as I know.

Ref: https://stackoverflow.com/a/1648854/201891

Update

It sounds like you want to disable the Enter key only when focus is in a particular field. You can write a Javascript method for that too and bind it to onkeypress. Write a Javascript method something like "if the enter key was pressed and the focus is in this field, return false; otherwise, return true".

Answer 6

onkeydown and onchange()

<h:form id="inputform">
   <p:inputText onkeydown="if (event.keyCode === 13) {onchange();return false;}"  >
      <p:ajax  update="updatearea"  /> 
   </p:inputText>
</h:form>