TabIndex - hitting tab moves me to Address Bar - unable to work around this using Focus or +tab indexes

The following jquery code seems to be working fine for me.. 

$(window).load(function () {
    $('.myClass :visible:input:enabled:first').focus();
});

$('body').on('keydown', '.myClass :visible:input:enabled:first', function (e) {
    if ((e.which == 9) || (e.keyCode == 9)) {
        $('.myClass :visible:input:enabled:first').focus();
    }
});

I faced similar problem in IE. After some analysis I found that, this problem occurs if there is any HTML content outside form. for example:

<html>
 <div id="1">
 </div>
 <form>
//other code
 </form>
</html>

It worked for me, after I moved all HTML inside form tag.

<html>    
 <form>
 <div id="1">
 </div>
//other code
 </form>
</html>

I found another better option which is fastest as of what I tried. Here's the code for that

function handleTabOrder() {
    $('.myClass :visible:input:enabled').each(function (index) {
        $(this).attr('tabindex', index + 10);
    });

    $('.myClass :visible:input:enabled:first').keydown(function (e) {
        if (e.keyCode == 9 || e.which == 9) {
            $("[tabindex=10]").focus();
        }
    });
}

What I have done here is to assign Tab order to all the visible controls on the page, then I have handled the key down event of only first control(that shifts the control to address bar) and now it shifts the control to next visible input item on the screen..

Its just a work around but works faster than any of the other things mentioned in the thread.

Just write the above function and all it in on-load event of page.

Tags:

Tabs

Recent Posts