CODEWITHSUNDEEP
jqueryasp.net-mvctwitter-bootstrap
eaglei22
eaglei22

Reputation: 2831

Tabindex issues with ASP.NET MVC 4

I am not sure why but no matter what I do, 

          <div class="input-group">
            <div id="LocationInputContainer">@Html.TextBoxFor(m => m.Location, new { @class = "form-control", @tabindex = 109})</div>
            <span class="input-group-btn">
              <button type="button" tabindex = "110" id="GetLocBtn" class="btn btn-default tip-left" onclick="LocationNumberModal()">Get</button>
            </span>
          </div>

ignores my tabindex..

I even tried overriding it with jquery using:

$(document).ready(function () {
    $('#Location').attr('tabindex', "109");
});

and the tabindex value just won't get added, something seems to be overrding it and I can't seem to find out what. I am using bootstrap with a grid for the for input placement, and the other input values work fine using TextBoxFor. I am stumped. This is in Firefox.

IE11 is another story, as tabbing will not even work correctly with IE11. It will skip one of the input boxes. Who knew tabbing would be so frustrating.

This is what FireFox inspector shows after page is ran:

<div id="LocationInputContainer"><input aria-required="true" class="form-control" data-val="true" data-val-required="A Location is required." id="Location" name="Location" value="" type="text"></div>

Upvotes: 1

Views: 1594

Answers (2)

eaglei22
eaglei22

Reputation: 2831

"IE11 is another story, as tabbing will not even work correctly with IE11. It will skip one of the input boxes. Who knew tabbing would be so frustrating."

Discovered it to be the selectize library I was using. For IE, somehow for IE only the tabindex was being set to a large negative number. I was able to adjust this in the included js file and this fixed the issue. Submitted possible bug here if interested:

https://github.com/selectize/selectize.js/issues/1259

And the rest I learned from Chris's response it's better to leave default tabbing index, and only use a setting -1 to exclude item from tabbing, or 0 to items like a span or a div into the tab order based off location.

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239290

You should pretty much never specify a tabindex other than 0. Controls like buttons, form fields, links, etc. have natural tab orders, so you don't need to specify a tabindex. As along as you're properly source-ordering your HTML, the natural tab order should be fine. Adding tabindex="0" will add things not normally included in the tab order, in the proper order based on their place in the document.

If you add a element with a specific tabindex, though, then it's taken out of the natural order and you pretty much goof up the entire tab order. If you're going to do one, then you pretty much have to specify the tabindex for every single tab-able element on the page, which I can almost guarantee you will screw up.

Long and short, use the natural order and don't mess with tabindex unless you have some sort of custom-created control that doesn't naturally get tabbed to. Even then, just use tabindex="0".

Upvotes: 2

Related Questions