3 Replies Latest reply on Jul 25, 2013 11:21 PM by Paul Baker

    Capturing the value of Key Presses in the Bean

    Drew McLaughlin Newbie

      Hi Folks,


      I've been looking around for a simple way to capture the value of a key up or key down on a h:inputtext field in the bean. Ideally I'd like to do this:


                          <h:inputText value="#{specialHazardOtherBean.currentOther.displayName}" label="Hazard Name" 
                                             id="specialHazardName" required="true" size="20" maxlength="100">
                             <a4j:ajax event="keyup" 
                                            render="msgSpecialHazardName, upperMenuForm, messagesPanel"


      and then in the bean:


         public void setAsChanged(AjaxBehaviorEvent aEvent)
                //perform certian actions based on based on the value of the key that is pressed.


      The trouble is that AjaxBehaviorEvent doesn't seem to have the value of the key that was pressed.


      This wouldn't be an issue only the "change" event doesn't seem to work for the h:inputtext - if anyone could clarify why that might be it would also be very useful!


      Thanks in advance



        • 1. Re: Capturing the value of Key Presses in the Bean
          Brian Leathem Master

          You can achieve what you are looking for by using the jsFunction component to create a javascript listener that inspects the client side event and provides the information to the backing bean via an ajax update.


          "change" should be invoked when the input element loses focus.

          • 2. Re: Capturing the value of Key Presses in the Bean
            Drew McLaughlin Newbie

            Tanks very much for your reply Brian, could you provide a simple example?


            EDIT: I had a look at the Showcase and dont quite understand your solution in the context of my problem :S


            Many Thanks,



            • 3. Re: Capturing the value of Key Presses in the Bean
              Paul Baker Apprentice

              Hi Drew,

              Here is a simple example that checks for the tab key pressed in the last field on a toggle panel page and then moves the to first field on the next toggle panel..  


              <h:inputText id= "#{cid.itmUPCFld}" onkeydown="mnatSwitchTab(#{rich:component('itmTabPnl')});" value="#{inventoryController.inventoryItem.upc}" />


              js code:

              function mnatSwitchTab(tabComponent) {
                var e = event || evt; // for trans-browser compatibility
                var charCode = e.which || e.keyCode;
                if (charCode == 9) {
                  var nextTab = tabComponent.nextItem();
                  if (nextTab != null) {
                  } else {


              Add js like:

              <h:outputScript library="default" name="js/mnat/mnatSwitchTab.js" />


              Generally, you would not want to invoke a backingbean on keyUp/keyDown type events.  This would be too much chatter..


              You can also call  jsFunction from within js..