동적 텍스트 상자의 탭 인덱스

Question

사용자가 &을 추가 할 수있는 화면이있어서 점수 입력에 사용할 행을 제거 할 수 있습니다. 입력 행은 & 미리 구성된 "템플릿"(예 : 내 그림으로 이동 ... 하트를 선택하고 "germs, wholebird"& "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

를 사용하여보기 저장소에 숨겨진 feild에 현재 탭 인덱스 값.

여기에 Jquery로 태그를 지정 했으므로 JQuery와에 아래의 코드를 추가

때마다 사용자에 다음 새 행을 추가 탭 인덱스 숨겨진의 feild 값을 읽고을 증가시키고 새로 추가 된 텍스트 상자로 설정을 클릭

때마다 삭제 감소 값에 사용자가 클릭 색인 숨겨진 필드의.