动态添加元素的标签索引答案

【问题标题】：Tab index for dynamically added elements动态添加元素的标签索引
【发布时间】：2011-03-10 06:33:35
【问题描述】：

我有一个带有三个文本框和旁边的添加按钮的 jsp 页面。现在我必须为动态添加的元素设置tabindex。我该怎么做？

【问题讨论】：

标签： html jsp tabindex dynamically-generated textbox

【解决方案1】：

[您现在可能已经知道，发布代码可以让其他人给出更明确的答案。如果没有示例，我只能想象您的代码和环境是什么......来自 ASP.NET MVC3 + jQuery]

[我使用了来自这个 stackoverflow post 的信息并修改了一点。]

我使用 jQuery 来修改 tabindex 的值。我有多个由 jQuery 动态添加的表单。表单使用 div 和 style="display: table" 将文本字段组织成列。

[相关的 CSS 样式]

.tb-table
{
    display: table;
}

.tb-row
{
    display: table-row;
}

.tb-cell
{
    display: table-cell;
}

[为浏览器生成 html 的 ASP.NET MVC3 Razor cshtml 的一部分——应该是可读的]

<div class="tb-table">
    <div id="namerow1" class="tb-row">
        <div class="tb-label tb-cell" id="l_firstname1">
            @Html.LabelFor(model => model.firstname1)
        </div>
        <div class="tb-field tb-cell" id="firstname1">
            @Html.TextBoxFor(model => model.firstname1, new { tabindex = "1" })
            @Html.ValidationMessageFor(model => model.firstname1)
        </div>
        <div class="tb-label tb-cell" id="l_firstname2">
            @Html.LabelFor(model => model.firstname2)
        </div>
        <div class="tb-field tb-cell" id="firstname2">
            @Html.TextBoxFor(model => model.firstname2, new { tabindex = "2" })
            @Html.ValidationMessageFor(model => model.firstname2)
        </div>
    </div>
    <div id="namerow2" class="tb-row">
        <div class="tb-label tb-cell">
            @Html.LabelFor(model => model.lastname1)
        </div>
        <div class="tb-field tb-cell">
            @Html.TextBoxFor(model => model.lastname1, new { tabindex = "1" })
            @Html.ValidationMessageFor(model => model.lastname1)
        </div>
        <div class="tb-label tb-cell">
            @Html.LabelFor(model => model.lastname2)
        </div>
        <div class="tb-field tb-cell">
            @Html.TextBoxFor(model => model.lastname2, new { tabindex = "2" })
            @Html.ValidationMessageFor(model => model.lastname2)
        </div>
    </div>
</div>

我对列中的所有值使用 tabindex；不仅仅是一个独特的顺序。对于我测试的浏览器，当有多个相同tabindex的文本字段时，html代码中最先遇到的文本字段会被tab-navigation优先选中。

因此，对于我拥有的每个表单，我使用 0-9 之间的制表符值对它们进行分组。一旦我以我想要的方式工作的单个表单的选项卡顺序，我使用以下 jQuery 将我动态添加的每个表单的 tabindex 值增加 10（或 20、30 或 40）。第一个小数点 0-9 组织该表单中的选项卡，并且将因子 10 递增保持后续表单选项卡跟随。

$('.createtab-form [tabindex]').each(function () {$(this).attr('tabindex', parseInt($(this).attr('tabindex'))+10)})

这是我自己的第一次尝试——我相信其他人会有更好的方法。让我知道你的想法。

【讨论】：