Capturing the value of Key Presses in the Bean

[blackjet]

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"
                                      limitRender="true" 
                                      listener="#{navigationBean.setAsChanged}"/> 
                    </h:inputText>

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

~Drew

[bleathem]

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.

[blackjet]

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,

~Drew

[pbaker01]

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) {
     tabComponent.switchToItem(nextTab);
    } else {
     tabComponent.switchToItem(tabComponent.firstItem());
    } 
 }
}

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