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

Question

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();
  }
});

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

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

edited May 23 '17 at 12:12

Community

1
1

answered Jun 16 '11 at 13:48

jmj

237,923
42
401
438

The trouble i'm having is that JSF's or primefaces javascript takes their code first, meaning the top button still gets clicked on enter and not the rest – Lyrion Jun 17 '11 at 06:35
Or actually the fact that i can't get the select of the input box, i've tried "#idForm:id_of_textbox" but he still won't select it. I've also tried changing $ to jQuery since i saw that aswell – Lyrion Jun 17 '11 at 09:59
Ok i got it fixed, i tried doing it with inline Javascript but i placed it in the front, i forgot that JSF actually generates the buttons and such aswell, and if you place it infront it will first place the events on nothing and then create the input text. – Lyrion Jun 17 '11 at 11:59

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

1 Answers1