How to set focus to the next input box onkeyup like tab functionality

Question

I am creating input boxes dynamically to capture inputs for a certain word (e.g. H E L L O for 'hello'). I want to set focus to the next input box after typing a single character in every input box. How should I do this?

<ui:repeat value="#{alphabets}" var="alphabet">
  <h:inputText value="#{alphabet.value}"/>
</ui:repeat>

Answer 1

It depends on how your HTML structure is. The easiest would it be to give every input an ID (which is always a good idea) and than set the id for the following inpunt in the event handler:

<input id="char1" onkeyup="document.getElementById("char2").focus()" />

Answer 2

That will do the trick

// script
function jumpNext(input) {
   $(input).next("input[type=text]").focus();
}


// jsf
<ui:repeat value="#{alphabets}" var="alphabet">
  <h:inputText value="#{alphabet.value}" onkeyup="jumpNext(this)" />
</ui:repeat>

example