Tabindex issues with ASP.NET MVC 4

Question

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>

Chris Pratt · Accepted Answer · 2017-03-03 19:52:14Z

2

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".

answered Mar 3, 2017 at 19:52

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

eaglei22 Over a year ago

Thanks Chris. I agree with you, I am just trying to do some troubleshooting as to why I am getting the response I am getting with IE default tabbing, and also, there is old way of thinking here at my job, where they like to do a lot of keyboard work as they did with green screen apps, but want flow to be a certain way as well as display a certain way. So I am trying to fulfill request if possible. But I found out as you said it might be a big maintenance nightmare overriding the tabindex.

Chris Pratt Over a year ago

Yes, if you need to tweak the flow, the way to do that is order items differently in the source. CSS can be used to visually present them in a different order if that's required.

eaglei22 Over a year ago

Well my main concern is IE11 will skip one input field even when using default. Any reason why that may occur? I am using selectize for the drop down menu and bootstrap.

Chris Pratt Over a year ago

If it's skipping an input, it's probably because the library you're using (i.e. selectize) is generating HTML that doesn't participate in the tab order (divs, etc.). The solution to that, as I said, is to add tabindex="0", which won't affect the rest of the tab order, but will include that element in that tab order. Given that it's a library, you may not have direct control of this, however. If that's the case, you'd then need to either take it up with the library's developer or find another solution.

eaglei22 Over a year ago

Ah okay, I will give that solution a shot and see thank you!

|

eaglei22 · Accepted Answer · 2017-03-07 17:39:23Z

0

"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.

answered Mar 7, 2017 at 17:39

eaglei22

2,8501 gold badge49 silver badges62 bronze badges

Collectives™ on Stack Overflow

Tabindex issues with ASP.NET MVC 4

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related