动态文本框的标签索引

Question

我有一个屏幕，允许用户添加和删除他们将用来输入分数的行。输入行是根据选择的样本类型和预配置的“模板”创建的（例如，按照我的图片...我选择了心，并且默认添加了“细菌，整只鸟”和“假单胞菌，Crubming”） ，但他们也可以根据需要追加或删除行。

我希望这样当用户进行选项卡时，它只会通过文本框而不是下拉框进行选项卡。

代码

索引

    @Html.ActionLink("New Row...", "AddRow", null, new { id = "addItem" })
        <div id="overflw" style="height: 260px; width: 885px; overflow: auto; border: 1px solid black">
            <div id="editorRows">
                @if (Model.Micros != null)
                {
                    foreach (var item in Model.Micros)
                    {
                        Html.RenderPartial("MicroRow", item);
                    }
                }
            </div>
        </div>
   <script type="text/javascript">
        $(".deleteRow").button({ icons: { primary: "ui-icon-trash" },
            text: false
        });          
    </script>

微行

    <div class="editorRow" style="padding-left: 5px">

    @using (Html.BeginCollectionItem("micros"))
    {  
        ViewData["MicroRow_UniqueID"] = Html.GenerateUniqueID();

        @Html.EditorFor(model => model.Lab_T_ID, new { UniqueID = ViewData["MicroRow_UniqueID"] })
        @Html.EditorFor(model => model.Lab_SD_ID, new { UniqueID = ViewData["MicroRow_UniqueID"] })      
        @Html.TextBoxFor(model => model.Result)
        <input type="button" class="deleteRow" title="Delete" value="Delete" />
    }
</div>

Answer 1

在视图中使用隐藏字段存储当前选项卡索引值。

正如您在此处标记了 Jquery。在Jquery中添加以下代码

每当用户单击添加新行时，然后读取选项卡索引隐藏字段值并将其递增并将其设置为新添加的文本框

每当用户点击删除时，索引隐藏字段的值就会减少。

Answer 2

嗯，我能想到的最简单的方法是在您位于其中一个文本框内时劫持您的 tab 键。我在这里提出了fiddle，这可能会大致说明我的意思。

<input type='text' id='n1' data-key='1' />
<input type='text' id='n2' data-key='2' />
<input type='text' id='n5' value = 'Tab skips me'/>
<input type='text' id='n3' data-key='3' />
<input type='text' id='n4' data-key='4' />

$(function(){
    $('input[type="text"]').keydown(function(e){
        if(e.which === 9){
            e.preventDefault();
            var self = $(this), 
                myIndex = parseInt(self.data('key'),10),
                nextIndex = myIndex + 1,
                nextElement = $('input[data-key="'+ nextIndex +'"]');
            nextElement.focus();
        }
    });
});​

​

编辑 - 使用 TabIndexes

虽然上面的代码可以像宣传的那样工作，但您可能还想使用 tabindex 进行检查。我承认，这是我不知道存在的东西。但是在阅读了 cmets 之后，认为这可能更适合您的要求。我有updated a fiddle 来展示它是如何工作的。看看吧

<input type='text' id='n1' tabindex='1' value="I'm first" />
<input type='text' id='n2' tabindex='3' value="I'm third" />
<input type='text' id='n5' value="I'm last"/>
<input type='text' id='n3' tabindex='2' value="I'm second" />
<input type='text' id='n4' tabindex='4' value="I'm fourth" />