On click of TAB the focus should be on the next textbox

Question

I have two textboxes and when TAB is pressed from one textbox it goes to another place instead of to the next textbox.

My code is:

   $(function () {

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

    });

When I press tab for txt1 it should go to txt2 but it doesn't.

Any help?

Answer 1

You don't have to do any code here. You just have to assign tab indexes in a proper order.

For example:

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

If you set a focus to "a", then push TAB, focus will move to "c", and then to "b".

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

Answer 2

Just use preventDefault and it will work

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

BTW, its much better to use direct selectors with ids (#txt2 instead of input[id$=txt2]).