Registerkarte Index der dynamischen Textfelder

Question

Ich habe einen Bildschirm, mit dem Benutzer hinzufügen können & Zeilen entfernen, die sie verwenden werden, um ihre Bewertungen einzugeben. Die Eingabezeilen werden basierend auf dem ausgewählten Probentyp erstellt. & ein vorkonfiguriertes "Template" (z. B. nach meinem Bild ... Ich wähle Herzen und "Keime, Vollblut" & "Pseudomonas, Crubming" wird als Standard hinzugefügt) , aber sie können auch Zeilen hinzufügen oder entfernen, wenn sie es für richtig halten.

Ich möchte es so, dass wenn ein Benutzer Tabs, es nur durch die Textfelder und nicht die Dropdown-Boxen Tab durchsucht.

Der Code

Index

@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

Nun, die einfachste Möglichkeit, die ich denken kann, ist Ihre Registerkarte Schlüssel zu entführen, wenn Sie in einem Ihrer Textfelder sind. Ich habe hier eine fiddle aufgestellt, die eine allgemeine Vorstellung davon geben könnte, was ich meinte.

<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(); 
     } 
    }); 
});​ 

Bearbeiten - Mit TabIndexes

Während das Stück Code oben funktioniert wie beworben, können Sie auch wollen tabindex mit auszuchecken. Ich gebe zu, das ist etwas, von dem ich nicht wusste, dass es existiert. Aber nach dem Durchlesen von Kommentaren entschied, dass dies etwas war, das besser zu Ihrer Anforderung passt. Ich habe updated a fiddle, um zu zeigen, wie es funktioniert. Probieren Sie es aus

<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

Verwenden Sie eine versteckte Feild in der Ansicht speichern den aktuellen Wert Registerkarte Index.

Wie Sie Jquery hier markiert haben. Fügen Sie den Code für die unten in JQuery

Immer wenn Benutzer klickt auf neue Zeile hinzufügen, dann auf die Registerkarte Index versteckt Feild Wert gelesen und erhöht es und legen Sie es auf die neu hinzugefügte Text

Jedes Mal, wenn Benutzer klickt auf Löschen verringern den Wert von Index verstecktes Feld.