The default action to execute when you click enter on a form

Question

I have a jsf 1.2 form with two buttons and several input fields. The first button discards the entered values ​​and re-fills the page with the values ​​from db, the second - saves the entered values. The problem occurs when the user presses the enter button while the cursor is in one of the input fields, the form is submitted and the action associated with the first button is performed.

The code is as follows:

<h:commandButton action="#{bean.reset}" value="Reset" /> <h:commandButton action="#{bean.save}" value="Save" /> <!-- h:datatable with several h:inputText elements --> 

Is it possible to declare a specific button as the default action when I press enter? Is this behavior really indicated somewhere?

Answer 1

This does not apply to JSF. This is typical of HTML. The HTML5 specification section 4.10.22.2 basically indicates that the first <input type="submit"> element in a "tree order" in the same <form> as the current input element in the HTML DOM tree will be called upon input.

There are basically two workarounds:

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

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

  If you have text fields in the form, you should put JS in all input elements other than textarea, and not in the form. See Also Prevent users from submitting a form by pressing Enter .

  ---

  
  
  

• Swap buttons in HTML and use CSS floats to replace them.

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

  This may only require pixel finalization. Of course, add CSS to your own .css file; using style is bad practice, the above example is for brevity.

  ---

  
  
  

If you use PrimeFaces, from 3.2 you can use <p:defaultCommand> to declaratively identify the button that should be invoked when you press the 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 is under covers using JavaScript to attach the keydown listener to the parent <h:form> , which in turn checks to see if the enter key is pressed in the non-textarea / button / link element, and then calls click() on target element. Basically the same as the workaround mentioned above in this answer.

Answer 2

I found a way that is less hacked and works well. The idea is a hidden commandButton .

Unfortunately, the display:none style cannot be used, because then commandButton will be ignored. visibility:hidden not good because it saves the reserved space of the component.

But we can fine-tune the style so that the size of its appearance is zero with the following CSS:

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

And now all that is required:

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

This will lead to the appearance of an invisible command button, which, in accordance with the rule of the first-next-send button, can be activated.

Answer 3

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

To change the default action, if you use simple fonts, 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: Directs a new component: DefaultCommand

Answer 4

Following BalusC's recommendation for resolving a problem using JavaScript, I wrote jQuery code to complete the task:

 $(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

Answer 5

Ignore the ENTER key only in input text fields ( source ):

 <script type="text/javascript"> function stopRKey(evt) { var evt = (evt) ? evt : ((event) ? event : null); var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if ((evt.keyCode == 13) && (node.type=="text")) {return false;} } document.onkeypress = stopRKey; </script> 

Answer 6

You can use h:commandLink for the first button and h:commandButton it with css, for example, h:commandButton .

For example, the "btn btn-default" downloads of "btn btn-default" look the same for commandLink and commandButton.

Answer 7

Try this attribute on an element:

 onkeypress="if (event.keyCode == 13) { this.blur(); return false; }"