Change the focus order of a text field using jQuery

Question

I was wondering if I had text fields displayed, I could change the order in which focus is used by javascript (preferably jQuery).

In this example, here .

What I mean when you circle them, instead of going "one, two, three, four, five," makes them go: "one, two, four, three, five."

Thanks in advance!

EDIT:. Thanks to everyone, I did not know that this is only possible with HTML. Of course, if so, I will go with it.

BTW Thanks to all your answers !!! (I will promote the full ones), but I agree with the first.

Answer 1

No need jQuery! Check out tabIndex .

Answer 2

Set the tabindex attribute for items.

jsfiddle

Answer 3

You can use the tabIndex property to have the tab order as needed: for example :.

 <input type="text" tabIndex=1 value="one"/><br /> <input type="text" tabIndex=2 value="two"/> <input type="text" tabIndex=4 value="three"/><br /> <input type="text" tabIndex=3 value="four"/> <input type="text" tabIndex=5 value="five"/> 

But if you want to dynamically change the client-side tab, you can use the jQuery.attr function.

 $(<YOUR ELEMENT SELECTOR>).attr("tabIndex", "YOUR_VALUE"); 

Answer 4

Just set the tabindex attribute, for example:

 <input type="text" value="one" tabindex="1" /><br /> <input type="text" value="two" tabindex="2"/> <input type="text" value="three" tabindex="4" /><br /> <input type="text" value="four" tabindex="3" /> <input type="text" value="five" tabindex="5" /> 

... JavaScript is not required. You can test it here .

Answer 5

You set the tabindex attribute using jQuery attr :

In your case, we need to use the eq selector , because your elements do not have an identifier.

 $("input:eq(0)").attr("tabindex","1"); $("input:eq(1)").attr("tabindex","2"); $("input:eq(2)").attr("tabindex","4"); $("input:eq(3)").attr("tabindex","3"); $("input:eq(4)").attr("tabindex","5"); 

Try it here!