Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

tabs

I read several threads that talk about how the Address Bar in IE is basically the first one to get focus when using TAB (MSDN's own docs talk about this).

Yet, I have seen situations where this doesn't always have to be the case....

I have a master page and inside my content area is a formView.

It defaults to INSERT view and can never leave it (they can only insert not edit and reading is handled elsewhere)

So on my page load for the page I have:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If fvwLogEntry.CurrentMode = FormViewMode.Insert = True Then
            'Set the default field to position the cursor there...hopefully
            Dim FCtxtHrEmployeeId As TextBox
            FCtxtHrEmployeeId = CType(fvwLogEntry.FindControl("txtHrEmployeeId"), TextBox)
            Page.SetFocus(FCtxtHrEmployeeId.ClientID.ToString)
        End If

Now that works, when the page loads it sets the cursor to the employeeID text box inside the formview's INSERT template.

HOWEVER, when I hit TAB it takes me to the address bar and THEN if I hit tab again it takes me through the rest of the items on the page.

I set the tab index of the first item to 11 and then incrimented from there (I had read that IE's toolbars have tab indexes too so I thought perhaps using a higher number would bypass those, but again that doesn't REALLY make sense since it would still start at the lowest number, but I gave it a shot thinking it would move forward from where the focus was set.) If I click on the textbox and then hit TAB it DOES move through the page like I would expect.

It is just when the page loads and gets the focus set to the employeeID textbox that hitting tab moves it to the address bar.

I also tried setting the other controls to -1 (those I didn't want it to tab to), still no luck there.

So... what can I do to get around this?

There MUST be a simple way to set the focus to the employeeID textbox and ensure that pressing TAB after that moves to the next control in the formview's insert template and does NOT jump up to the address bar?

like image 457
Gautam Avatar asked Aug 13 '13 11:08

Gautam


People also ask

How do I stop my tab from focusing?

To prevent tab indexing on specific elements, you can use tabindex="-1". If the value is negative, the user agent will set the tabindex focus flag of the element, but the element should not be reachable with sequential focus navigation. Note that this is an HTML5 feature and may not work with old browsers.

What does Tabindex =- 1 mean?

A negative value (usually tabindex="-1" ) means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.

How do I get rid of Tabindex in HTML?

The way to do this is by adding tabindex="-1" . By adding this to a specific element, it becomes unreachable by the keyboard navigation.


1 Answers

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();
    }
});
like image 150
Gautam Avatar answered Sep 28 '22 07:09

Gautam