禁用asp.net mvc中所有控件的TAB键

Question

我有一个包含多个页面的asp.net MVC项目。 对于每个页面，我必须将TAB键设置为仅在某些控件中。我知道我可以设置：

tabIndex=x , x > 0 //to enable
tabIndex=-1, //to disable

问题是我有5个TAB键应该工作的控件和50个不应该工作的控件（数字只是为了理解比例）。所以我想知道是否有办法禁用整个页面的TAB键（来自* .css或管理器），而不是只为需要它的少数特定控件启用它。

Answer 1

据我所知，这不能像你希望的那样直接完成。您可以考虑做的是对未设置选项卡索引的所有元素执行JS函数，将其设置为小于零：

var elements = document.querySelectorAll("input:not([tabindex])");
for (var i = 0; i < elements.length; i++) {
    elements[i].tabindex = -1;
}

请注意，根据您拥有的元素数量，这可能会拖累效果，因此您需要考虑基准测试。

您可以考虑的另一个选项是创建一个HTML帮助程序服务器端，它禁用该元素的选项卡索引。您可以使用Razor @helper语法在本地执行帮助，也可以在HtmlHelper类上使用扩展方法全局执行帮助。这将比JS表现得更好，但根据您的情况可能会有点沉重。

Answer 2

由于有太多元素不应该被选项卡，而是为它们禁用或禁用TAB键，我更改了具有tabIndex的元素的默认行为，按下了onkey：

1）我获取了tabIndex大于0的所有元素：

var tabbables = document.querySelectorAll("input[tabindex], textarea[tabindex]");

这是一个简化版本，您应该进行可见性检查并选择其他类型的元素（例如按钮等）。

2）我在2种情况下替换了默认行为：TAB按下并选择了带选项卡索引的最后一个元素或按下了SHIFT + TAB并选择了第一个元素。对于这些情况，我强调了第一个元素，分别是最后一个元素。

一个类似的问题有一个非常好的答案（不是接受的答案，大多数选票的答案）在这里："Focus Next Element In Tab Index"