Apex:inputText Command with onKeypress Event | Techila
2205
single,single-post,postid-2205,single-format-standard,ajax_updown_fade,page_not_loaded,,qode_grid_1300,footer_responsive_adv,hide_top_bar_on_mobile_header,qode-content-sidebar-responsive,qode-theme-ver-9.4.2,bridge,wpb-js-composer js-comp-ver-4.12,vc_responsive
 

Apex:inputText Command with onKeypress Event

APEX:INPUTTEXT COMMAND WITH ONKEYPRESS EVENT

Apex:inputText Command with onKeypress Event

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

Over the years browsers have interpreted the enter key in different ways. Early versions of Firefox required an <input type=’submit’> element in the form for the submission to take place. Internet explorer would submit the form but if there was only a single field it would omit the name/value from the submit button, but if there was more than one field the button information would be included.

Modern browsers now share common behaviour, in that the enter key is interpreted as a request to submit the form via the first submit button. However, if you want to use a different button to submit the form, or you have to contend with old (and unsupported) browsers you need another solution.

In my case, I have a form that is used to search for duplicate accounts before creation. This has a number of text input fields to capture the search criteria and a couple of buttons to clear the criteria or execute the search. A screenshot is show below:

accsearch

When the user hits the enter key, I want to carry out the search via the second button rather than the first so the default browser behaviour won’t work for me in this case.

The solution is to bind a javascript handler to the onkeypress event of each of the inputs. In my case I’ve named it ‘noenter’:

<apex:inputText id=”name” value=”{!searchCriteria.name}” onkeypress=”return noenter(event);”/> 

the noenter function has some code at the end to get at the actual code of the key pressed, taking into account the number of different ways that browsers may present it, and then if the code is 13, aka the enter key, then the search button element is located on the form and its click method executed.  Note that if the enter key is detected, the function returns false – this is a vital part of the solution as it tells the browser not to continue with the default behavior, which was to submit the form via the first button.  If false isn’t returned, you are into an interesting race condition with two form submissions battling it out for supremacy.

<script>

   function noenter(ev)

   {

      if (window.event)

      {

          ev=window.event;

      }

      var keyCode;

      if (ev.keyCode)

      {

         keyCode=ev.keyCode;

      }

      else

      {

         keyCode=ev.charCode;

      }

      if (keyCode == 13)

      {

         var ele=document.getElementById(‘{!$Component.form.crit_block.crit_section.searchbtn}’);

         ele.click();

         return false;

      }

      else

      {

         return true;

      }

   }

</script>

I’ve tested this on Chrome, Firefox, Opera and Safari and it behaves as expected.

Courtesy: http://bobbuzzard.blogspot.in/2012/10/press-enter-to-submit.html
https://t4.ftcdn.net/jpg/00/28/27/95/240_F_28279558_SqNXoZWsQLfWYVxyKe9hVzZ49dJtKLsc.jpg

“Know more about Salesforce Consulting at Techila”

Author: techila

No Comments

Post A Comment