Tuesday, November 15, 2016

Click of keyboard ENTER should trigger the click event

Use Case

If there is a requirement where we have multiple buttons on a visual force page and the click of keyboard ENTER should trigger the click event of only one specific button.

Solution

We can use a java script snippet to read a user’s ENTER key press and using DOM trigger the button click event. Based on the requirement we can provide the Id of the button which we want to trigger on the visualforce page using javascript.

Reusable Code

Visualforce:
<apex:page id="examplePage">
                <head>
                                <script type="text/javascript">
                                                function submitForm(e)
                                                {
                                                                var keynum = 0;
                                                                if (window.event)
                                                                {
                                                                                keynum = window.event.keyCode;
                                                                }
                                                                else if (e.which)
                                                                {
                                                                                keynum = e.which;
                                                                }
                                                                if (keynum == 13)
                                                                {             
                                                                                // Replace "exampleButton1" with the ID of the button you want to trigger
                                                                                document.getElementById("examplePage:exampleForm:examplePageBlock:exampleButton1").click();
                                                                                return false; 
                                                                }
                                                                else{
                                                                                return true;
                                                                }
                                                }
                                </script>
                </head>
                <apex:form id="exampleForm">
                                <apex:pageBlock id="examplePageBlock">
                                                <apex:inputText onkeypress="return submitForm(event);"/>
                                                <apex:commandButton id="exampleButton1" value="Save"/>
                                                <apex:commandButton id="exampleButton2" value="Next"/>
                                </apex:pageBlock>
                </apex:form>

</apex:page>

No comments:

Post a Comment