1

我正在维护一个高级 eform 应用程序，其中包含我无法轻易更改的混合遗留自由文本 HTML。以前没有使用 tabindex，它依赖于字符流顺序。

在页面中间，我需要引入一个表格，其中包含带有自定义跳格顺序的输入，例如：

|-----|-----|-----|
| 1 | 3 | 5 |
|-----|-----|-----|
| 2 | 4 | 6 |
|-----------------|

在页面上呈现遗留/先前添加的输入的方式，我实际上可以动态/集中更改它们，以便它们按顺序输出标签索引。如：

[输入，标签索引：1]

|-----|-----|-----|
| 2 | 4 | 6 |
|-----|-----|-----|
| 3 | 5 | 7 |
|-----------------|

[输入，标签索引：8]

但是，当自由文本 HTML 锚点开始出现时，问题就出现了，这些锚点不是动态呈现的（因此不能轻易地将 tabindex 添加到它们，除非我添加了相当多的正则表达式逻辑）。那么标签就变成了这样：

[输入，标签索引：1]

|-----|-----|-----|
| 2 | 4 | 6 |
|-----|-----|-----|
| 3 | 5 | 7 |
|-----------------|

[锚链接]
[输入，标签索引：8]

这使得链接无法被选项卡到. 可能有更糟糕，更高级的案例......但我认为这个问题可以理解吗？

所以我的问题是……是否有可能以某种方式分配某种 tabindex 组：

[标签组1]
[输入]
[/标签组1]

[标签组2]
|-----|-----|-----|
| 1 | 3 | 5 |
|-----|-----|-----|
| 2 | 4 | 6 |
|-----------------|
[/标签组2]

[标签组3]
[锚链接]
[输入]
[/标签组3]

这样我就可以像以前一样进行制表工作，按字符流的顺序跳转，从输入到最近的锚点，到下一个输入，等等……但是在 [tabgroup2] 内部时，它将按tabindexes 在那里，但随后继续进入 [tabgroup2] 和 tab 就好像所有元素都有tabindex="0"

我正在寻找的是一些神奇的 HTML 解决方案（这不太可能）或一个相对简单的 javascript 库，它可能已经实现了类似的东西。

或者，如果这实际上不存在，那么如果我自己尝试实现它，听到一些替代想法或可能的警告想法会很有趣。

4

1 回答 1

1

好的，我用自己的一些代码解决了这个问题。生成的 javascript 如下所示：

function updateTabIndex() {
    $('a, area, button, input, object, select, textarea').each(function(i, e) {
        var element = $(e);

        var tabIndex = i;
        if (element.attr('data-tabindexoffset')) {

            var tabgroup = $(element.closest('[data-tabgroup]'));
            if (!tabgroup.attr('data-tabindexstart')) {
                tabgroup.attr('data-tabindexstart', tabIndex);
            }

            var tabIndexStart = parseInt(tabgroup.attr('data-tabindexstart'));
            tabIndex = tabIndexStart + parseInt(element.attr('data-tabindexoffset'));
        }

        $(e).attr('tabindex', tabIndex);
    });
}

$(function() {
    updateTabIndex();
});

这使我能够不使用 tabindexes，除了已知元素组内的偏移量，其中 tabindex 不会遵循常规字符流顺序。它似乎工作得很好，因为组之后的标签索引总是相同的；只是它们之间的那些被重新排序。

像这样的解决方案的唯一问题是，如果在 AJAX 调用中添加和删除了元素，那么所有索引都需要重新计算。但它应该相当快。

示例 HTML 是：

<table data-tabgroup="1">
    <tr>
        <td><input type="text" name="b" data-tabindexoffset="0" value="1" /></td>
        <td><input type="text" name="c" data-tabindexoffset="2" value="3" /></td>
    </tr>
    <tr>
        <td><input type="text" name="d" data-tabindexoffset="1" value="2" /></td>
        <td><input type="text" name="e" data-tabindexoffset="3" value="4" /></td>
    </tr>
</table>

<a href="#">A link</a>
<input type="text" name="f" />
于 2012-12-19T22:45:01.997 回答