動的テキストボックスのタブインデックス

Question

私は、ユーザーが&を追加してスコアを入力するために使用する行を削除できるようにしました。入力行は、&の選択済みサンプルタイプに基づいて作成されます。（例えば、私の写真に行く...私は心臓を選択し、 "細菌、全鳥" & "Pseudomonas、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> 

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

は、ビューストアに現在のタブインデックス値を隠しフェイルドを使用してください。

ここにはJqueryというタグがあります。新しい行を追加をユーザーがクリックすると、値をタブインデックス隠しフェイルド値を読んで、それをインクリメントし、ユーザーが削除デクリメントをクリックするたびに、新たに追加されたテキストボックス

に設定するたびに以下のjQuery

でのコードを追加します。インデックス隠しフィールドの。