我有一个屏幕，允许用户添加&删除行，他们将用于输入他们的分数。输入行被创建基于选择的样本类型&预先配置的“模板”（例如，去我的照片...我选择心脏，“细菌，全鸟”&“Pseudomonas，Crubming”被添加为默认），但他们也可以在他们认为合适的时候追加或删除行。动态文本框的Tab索引

我喜欢它，所以当用户选项卡时，它只会通过文本框选项卡，而不是下拉框。

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>

来源

2012-04-03 Rohan Büchner

您可以使用tabindex属性来实现此目的。你能为行显示模板吗？ – 2012-04-03 07:28:01

那么，我能想到的最简单的方法就是在您的某个文本框中劫持您的选项卡键。我在这里提出了一个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" />

来源

2012-04-03 07:39:46

辉煌！我会刺穿它。但似乎是要走的路。谢谢 – 2012-04-03 08:16:33

@Yenros很乐意帮忙 – 2012-04-03 08:37:13

@MateuszW - 根据你的评论发布了一个编辑 – 2012-04-03 09:03:48

使用隐藏费尔德在视图中存储中的当前标签索引值。

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

每当用户点击添加新行再读取标签索引隐藏费尔德保值增值，并将其设置为新添加的文本框

每当上删除递减值用户点击索引隐藏字段。

来源

2012-04-03 07:30:07 TRR

动态文本框的Tab索引

回答

编辑 - 使用TabIndexes

相关问题