html - 动态添加元素的标签索引

Question

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

Answer 1

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

[我使用了这个stackoverflow帖子中的信息并修改了一点。]

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

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

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