编辑 - 使用TabIndexes

Question

我有一个允许用户添加＆amp;删除他们用来输入分数的行。输入行将根据所选的样本类型创建。一个预配置的“模板”（例如，通过我的图片...我选择心脏，“细菌，整只鸟”和“假单胞菌，Crubming”作为默认添加），但他们也可以追加或删除行他们认为合适。

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

enter image description here

代码

索引

    @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>

MicroRow

    <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

嗯，我能想到的最简单的方法就是在你的某个文本框中劫持标签键。我在这里提出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 结帐。我承认，这是我不知道存在的东西。但在阅读评论后，决定这可能更适合您的要求。我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" />

Answer 2

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

正如你在这里标记Jquery一样。在Jquery

中添加以下代码

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

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

动态文本框的Tab索引

2 个答案:

编辑 - 使用TabIndexes