动态添加元素的选项卡索引

Question

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

Answer 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;
}

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

<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 代码中首先遇到的文本字段。

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

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

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