When you press the TAB button, the focus should be in the next text box

Question

I have two text fields, and when TAB is pressed from one text field, it goes to another place, and not to the next text field.

My code is:

$(function () { $("input[id$=txt1]").bind('keydown', function (e) { if (e.which == 9) { // alert("hello"); $("input[id$=txt2]").focus(); } } ); }); 

When I click the tab for txt1, it should go to txt2, but it is not.

Any help?

Answer 1

Just use preventDefault and it will work

 $("#txt1").bind('keydown', function (e) { if (e.which == 9) { $("#txt2").focus(); e.preventDefault() } } ); 

BTW, it is much better to use direct selectors with identifiers (# txt2 instead of entering [id $ = txt2]).

Answer 2

You do not need to make code here. You just need to assign the tab indices in the correct order.

For instance:

 <input type="text" value="a" tabindex="1" /> <input type="text" value="c" tabindex="3" /> <input type="text" value="b" tabindex="2" /> 

If you set the focus to “a,” then press TAB, the focus moves to “c,” and then to “b.”

See the demo here: http://jsbin.com/epacop/2