I have an asp.net MVC project with multiple pages. For each page I must set the TAB key to go only among some controls. I know I can set:
tabIndex=x , x > 0 //to enable
tabIndex=-1, //to disable
The problem is that I have 5 controls for which the TAB key should work and 50 controls for which it should not work (the numbers are just to understand the proportions). So I was wondering if there is a way to disable the TAB key for an entire page (from *.css or a manager) and than make it enable just for the few specific controls that need it.
As far as I know this cannot be done as directly as you probably hope. What you can consider doing is executing a JS function on all elements where the tab index not set, setting it to less than zero:
var elements = document.querySelectorAll("input:not([tabindex])");
for (var i = 0; i < elements.length; i++) {
elements[i].tabindex = -1;
}
Keep in mind that depending on the number of elements that you have, this could be a drag on performance so you will want to consider benchmarking.
The other option that you could consider would be to create an HTML helper server-side which disables the tab index of the element. You can do helpers locally using the Razor @helper syntax, or globally using an extension method on the HtmlHelper class. This would perform significantly better than JS but may be a bit heavy handed depending on your scenario.