Question

我看过一些有关tabIndex问题的帖子，但我找不到类似我需要解决的方案。

所以这是项目的缩减。它是一个使用AJAX 1.0 Extensions和jQuery的ASP.NET 2.0 Web应用程序。我正在寻找任何编程语言中的任何想法来处理这样的场景。

首先，我知道如何设置tabIndex，无论是硬编码还是在用户控件中自动生成。我遇到的问题是，如果你有一个使用AJAX的复合控件，例如，网格控件，您的tabIndex属性全部设置为所有表单条目元素，包括AJAX网格控件中的可见行。例如，如果我通过AJAX向网格添加新行，那么选项卡排序会发生什么？

下面是Tab键顺序，而不是HTML中元素的顺序：

初始页面加载

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6
etc.

现在通过AJAX，我向网格添加了一个新行

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index ?
     |-- Cell 2, tab index ?
Input 3, tab index 6
etc.

根据我的理解，默认情况下tabIndex属性的值为-1，因此所有没有属性的元素按照它们在任何元素之后出现在文档对象模型树中的顺序进行选项卡（如果有任何有tabIndex属性值＆gt;）所以我的Row 2单元格会得到-1作为tabIndex值。因此，通过我的表单进行选择就像这样：

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6

|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index 7 (7 because of default -1 value behavior)
     |-- Cell 2, tab index 8 (8 because of default -1 value behavior)

我查看了一些jQuery插件，但没有处理我想做的事情（或者至少我不认为他们这样做）。我查看了jQuery Tabindex插件和jQuery Field插件（v0.9.2）。

我的想法：

- 通过表单元素客户端来重置所有tabIndex值。如果你想要元素在表单中出现的顺序，这是有效的，但这可能很慢，并且很可能导致页面在加载时打嗝。同样，如果您希望订单显示在表单中，为什么还要使用tabIndex呢？没有它的元素将是tabIndex = -1，并将按它们在HTML中出现的顺序选项卡。

- 对于复合控件指定保留的tabIndex范围，所以当我用它的第1行单元格中的一个tabIndex为4时，我说网格之后的下一个控件将是tabIndex = 500，这样我就可以保留我通过AJAX添加新行时的其他tabIndex值。

- 你的想法就在这里。

Answer 1

虽然这不是你问题的答案，但我认为值得一提。就我所知，-1不是tabindex的默认值，将tabIndex设置为-1意味着几乎所有现代浏览器（包括IE）都不能选中该元素。如果您在任何测试场景中都假设这一点，这可能会非常混乱。

Answer 2

实际上，在您的情况下，解决方案将非常简单。只需将所有表单输入和动态输入设置为“1”即可。它将根据相对顺序标记所有1。唯一的问题是我认为浏览器在文档加载时设置选项卡索引，因此Ajax元素可能永远不会进入选项卡顺序。

tabIndex属性和AJAX

2 个答案: