Get an inputtext to set it's focus on one specific commandButton

I have this page with 4 input texts, and each has his own button to press, now if I click on one input text the focus is always set on the top commandButton.

The page:

            <h:panelGrid columns="4">
                <h:outputLabel for="calSysCode">#{msgs.calSysCode}</h:outputLabel>
                <p:inputText id="calSysCode" label="#{msgs.calSysCode}" size="35" required="true" value="#{lookupBean.calSyscode}" >
                        <f:validator validatorId="syscodeValidator" />
                </p:inputText>                  
                <p:message for="calSysCode"/>
                <p:commandButton value="#{msgs.search}" process="@this, calSysCode, cboxWithDependencies" action="submitCalSysCode" update="@form"/>
                <h:outputLabel for="contractSysCode">#{msgs.contractSysCode}</h:outputLabel>
                <p:inputText id="contractSysCode" label="#{msgs.contractSysCode}" size="35" required="true" value="#{lookupBean.contrSyscode}" >
                        <f:validator validatorId="syscodeValidator" />
                </p:inputText>                  
                <p:message for="contractSysCode"/>
                <p:commandButton value="#{msgs.search}" process="@this, contractSysCode, cboxWithDependencies" action="submitContrSysCode" update="@form"/>
                <h:outputLabel for="employeeSysCode">#{msgs.employeeSysCode}</h:outputLabel>
                <p:inputText id="employeeSysCode" label="#{msgs.employeeSysCode}" size="35" required="true" value="#{lookupBean.employeeSyscode}" >
                        <f:validator validatorId="syscodeValidator" />
                </p:inputText>                  
                <p:message for="employeeSysCode"/>
                <p:commandButton value="#{msgs.search}" process="@this, employeeSysCode, cboxWithDependencies" action="submitEmployeeSysCode" update="@form"/>
                <h:outputLabel for="employerSysCode">#{msgs.employerSysCode}</h:outputLabel>
                <p:inputText id="employerSysCode" label="#{msgs.employerSysCode}" size="35" required="true" value="#{lookupBean.employerSyscode}" >
                        <f:validator validatorId="syscodeValidator" />
                </p:inputText>
                <p:message for="employerSysCode"/>
                <p:commandButton value="#{msgs.开发者_开发技巧search}" process="@this, employerSysCode" action="submitEmployerSysCode" update="@form"/>
            </h:panelGrid>

Now I was wondering if it was possible to set focus from each of the inputTexts to each of the buttons? So when I click on calSyscode inputText and press enter the calSyscode commandbutton gets used, and when I click on the contractSyscode the contract syscode button is used.

Edit: If you want to do it with primefaces you need to use this code, its just the same as Jigar's but a little adapted for primefaces and jQuery

jQuery(PrimeFaces.escapeClientId('sysCodeForm:calSysCode')).keyup(function(event){
  if(event.keyCode == 13){
      jQuery(PrimeFaces.escapeClientId('sysCodeForm:calenderButton')).click();
  }
});

JQuery would make it easier to do, You can handle it following way.

$("#id_of_textbox1").keyup(function(event){
  if(event.keyCode == 13){
    $("#id_of_button1").click();
  }
});

$("#id_of_textbox2").keyup(function(event){
  if(event.keyCode == 13){
    $("#id_of_button2").click();
  }
});

See Also

• Trigger button click with JavaScript on Enter key in Text Box