ASP.NET MVC 4 的 Tabindex 问题答案

【问题标题】：Tabindex issues with ASP.NET MVC 4ASP.NET MVC 4 的 Tabindex 问题
【发布时间】：2017-03-03 17:33:05
【问题描述】：

我不知道为什么，但不管我做什么，

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

忽略我的 tabindex..

我什至尝试使用 jquery 覆盖它：

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

并且 tabindex 值不会被添加，似乎有些东西超过了它，我似乎无法找出是什么。我正在使用带有网格的引导程序进行输入放置，而其他输入值使用 TextBoxFor 可以正常工作。我很难过。这是在 Firefox 中。

IE11 是另一回事，因为选项卡甚至无法在 IE11 上正常工作。它将跳过其中一个输入框。谁知道标签会如此令人沮丧。

这是页面运行后 FireFox 检查器显示的内容：

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

【问题讨论】：

标签： jquery asp.net-mvc twitter-bootstrap

【解决方案1】：

您几乎不应该指定0 以外的tabindex。按钮、表单域、链接等控件具有自然的 tab 顺序，因此您无需指定 tabindex。只要您正确地对 HTML 进行源排序，自然的 tab 顺序应该没问题。添加tabindex="0" 将根据它们在文档中的位置以正确的顺序添加通常不包含在标签顺序中的内容。

但是，如果您添加一个具有特定 tabindex 的元素，那么它就会脱离自然顺序，并且您几乎会弄乱整个 tab 顺序。如果你要做一个，那么你几乎必须为页面上的每个可选项卡元素指定 tabindex，我几乎可以保证你会搞砸的。

无论长短，都使用自然顺序，不要乱用 tabindex，除非你有某种自定义创建的控件，它不会自然地被标签化。即使这样，也只需使用tabindex="0"。

【讨论】：

谢谢克里斯。我同意你的观点，我只是想解决一些问题，为什么我会得到我使用 IE 默认选项卡得到的响应，而且，在我的工作中有旧的思维方式，他们喜欢做很多事情的键盘工作就像他们对绿屏应用程序所做的那样，但希望流程以某种方式以及以某种方式显示。因此，如果可能，我会尽力满足要求。但我发现正如你所说，这可能是一个覆盖 tabindex 的大型维护噩梦。
是的，如果您需要调整流程，方法是在源中以不同的方式订购项目。如果需要，CSS 可用于直观地以不同的顺序呈现它们。
好吧，我主要担心的是 IE11 会跳过一个输入字段，即使使用默认值也是如此。为什么会发生这种情况？我正在使用 selectize 作为下拉菜单和引导程序。
如果它跳过输入，可能是因为您正在使用的库（即 selectize）正在生成不参与 tab 顺序（div 等）的 HTML。正如我所说，解决方案是添加tabindex="0"，这不会影响tab 顺序的其余部分，但会在该tab 顺序中包含该元素。但是，鉴于它是一个库，您可能无法直接控制它。如果是这种情况，那么您需要与库的开发人员联系或寻找其他解决方案。
嗯，好的，我会试试这个解决方案，看看谢谢！

【解决方案2】：

“IE11 是另一回事，因为 Tab 键甚至无法在 IE11 上正常工作。它会跳过一个输入框。谁知道 Tab 键会如此令人沮丧。”

发现它是我正在使用的选择库。对于 IE，不知何故，对于 IE，只有 tabindex 被设置为一个很大的负数。我能够在包含的 js 文件中进行调整，这解决了这个问题。如果有兴趣，请在此处提交可能的错误：

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

我从 Chris 的回复中了解到，最好保留默认的制表符索引，并且仅使用设置 -1 将项目从制表符中排除，或者将 0 设置为跨度或 div 等项目，以便基于位置的制表符顺序。

【讨论】：