Question

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

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

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

传统/以前添加的输入在页面上呈现的方式，我实际上可以动态地/集中地改变它们，以便它们按顺序输出tabindex。如：

[Input, tabindex: 1]

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

[Input, tabindex: 8]

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

[Input, tabindex: 1]

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

[anchor link]
[Input, tabindex: 8]

这使得链接无法标记为。可能会有更糟糕，更高级的案例...但我认为这个问题是可以理解的吗？

所以我的问题是这个 ...是否有可能以某种方式分配一些tabindex组：

[tabgroup1]
[Input]
[/tabgroup1]

[tabgroup2]
|-----|-----|-----|
|  1  |  3  |  5  |
|-----|-----|-----|
|  2  |  4  |  6  |
|-----------------|
[/tabgroup2]

[tabgroup3]
[anchor link]
[Input]
[/tabgroup3]

这样我就可以像以前一样进行Tab键工作，按照字符流的顺序跳转，从输入到最近的锚点，到下一个输入，等等......但是在[tabgroup2]里面它会进入tabindexes的顺序，然后继续进入[tabgroup2]和tab，就好像所有元素都有 tabindex =“0”

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

或者，如果这不存在，那么，如果我试图实现它，我会听到一些其他想法，或者可能需要注意的想法。

Answer 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不遵循常规字符流顺序。它似乎工作得很好，因为该组之后的tabindexes始终是相同的;只是重新排序的那些。

这样的解决方案唯一的问题是，如果在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" />

HTML - 分组tabindexes; tabindexes位于遗留HTML代码的中间

1 个答案: