Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 703
G.S Bhangal Avatar asked Feb 22 '23 22:02

G.S Bhangal


2 Answers

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

like image 193
Sergio Tulentsev Avatar answered Feb 24 '23 13:02

Sergio Tulentsev


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]).

like image 21
Ivan Castellanos Avatar answered Feb 24 '23 12:02

Ivan Castellanos