Issue - Hitting Enter Key to login does not respond ?

This is a common issue for ADF developers -  Login page asks for Username and password and  hitting the enter button  does not respond ,user has to click the Login button to authenticate.

In this post we will see how we can handle the Enter key press to send login request to server.We will use the java script inside our Jspx page and client listener to invoke the method .

Immediately after user enters the password ,we will set the focus to submit button , by this way when user will press the enter key ,the actionlistener will execute the logic  .

See below the code for Jspx page -


 Username Text field -

                      <af:inputText label="#{langContrl.user_name}" id="it1"
                                    value="#{demoAuthenticate.txtUserName}"
                                    required="true"/>
                 
Password Text field -

                      <af:inputText label="#{langContrl.password}" id="it2"
                                    value="#{demoAuthenticate.txtPassword}"
                                    secret="true" required="true">
                        <af:clientListener method="myFunctionTosetFocus"
                                           type="keyDown"/>
                      </af:inputText>
   
   
The javascript code -



 <trh:script  id="dfsd23423" text="
                                        function myFunctionTosetFocus(event)
                                        { var keyCodePressed = event.getKeyCode();
                                        var formComponents = event.getSource();
                                        var enterBtn = formComponents.findComponent('cb1');
                                        if(keyCodePressed=='13'){
                                        enterBtn.focus();                                  
                                        }
                                        }"/>



Submit button code -


    <af:commandButton text="#{langContrl.btn_submit}" id="cb1"
                                        actionListener="#{demoAuthenticate.checkValidUser}"
                                        partialSubmit="true"
                                      >
                   
                      </af:commandButton>