CODEWITHSUNDEEP
jsf
user4567214
user4567214

Reputation: 53

Move cursor to the next inputText when Tab key is pressed JSF

I have multiple inputText in which the user has to enter his name, age, weight, height. The problem is when I press the Tab key it is supposed to move the cursor from name to age, but it goes directly to the weight. Any thought what could be the problem.

Upvotes: 0

Views: 2687

Answers (1)

Vasil Lukach
Vasil Lukach

Reputation: 3728

Add tabindex attribute in each UI component (text field, link, button) with number which represents step in your sequence. See doc:

tabindex - javax.el.ValueExpression (must evaluate to java.lang.String) - Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767.

Example:

  <h:outputLabel for="user" value="#{msg.userId}"/>
  <h:inputText id="user" value="#{login.userName}" tabindex="1" />
  <h:commandLink value="#{msg.forgotUser}?" action="forgotUser" tabindex="4" />

  <h:outputLabel for="password" value="#{msg.password}" />
  <h:inputSecret id="password" value="#{login.password}" tabindex="2" />
  <h:commandLink value="#{msg.forgotPassword}?" action="#{forgotPassword}" tabindex="5" />

  <h:commandButton value="#{msg.login}" type="submit"
      action="#{login.login}" tabindex="3" />

Upvotes: 1

Related Questions