CODEWITHSUNDEEP
javascriptjavajqueryjsfrichfaces
José Sanabria
José Sanabria

Reputation: 31

How to set focus and cursor on the first field of a form in JSF

the problem I have is referring to the forms made in Java Server Faces:

<rich:popupPanel id="popupConfigFile" autosized="true" resizeable="false">           
   <h:form>
      <h:panelGrid id="pgConfigFile" columns="2" columnClasses="colLabel,colInput">
         <h:outputLabel value="Name: "/>
         <h:inputText value="#{configBean.configFile.name}" tabindex="1"/>
         <h:outputLabel value="Description: "/>
         <h:inputTextarea value="#{configBean.configFile.description}" tabindex="2"/>
         <h:outputLabel value="Date: "/>
         <rich:calendar value="{configBean.configFile.date}" datePattern="dd/MM/yyyy" 
                               showFooter="false" tabindex="3"/>
         <h:outputLabel value="Enabled: "/>
         <h:selectBooleanCheckbox value="#{configBean.configFile.enabledConfig}" tabindex="4"/>
      </h:panelGrid>
      <br/>
      <a4j:commandButton value="Save" action="#{configBean.saveConfig}"                        
        oncomplete="if(#{facesContext.maximumSeverity==null}){#{rich:component('popupConfigFile')}.hide();}"/>
   </h:form>
</rich:popupPanel>

I want to set the focus and cursor on the first field (INPUT) of the form, in the NAME example. Then, using the TAB key, go ahead with the focus and the cursor to the other fields (TEXTAREA, CALENDAR, CHECKBOX) in an orderly manner.

Thanks for your help!

Upvotes: 0

Views: 1065

Answers (1)

Thanigai Arasu
Thanigai Arasu

Reputation: 413

There are various ways to focus the first editable component in the form. Here is one of the way. I believe you want to set the focus for the first input element in the popup. Use onShow property and set the focus to the first component.

onShow="setTimeout(function(){ $('#formId\\:firstComponentId').focus();}, 500); "

Upvotes: 1

Related Questions