Question

我有一个带有三个文本框的jsp页面，旁边有一个ADD按钮。现在我必须为动态添加的元素设置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)})

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

动态添加元素的Tab索引

1 个答案: