Question

I’ve got a screen that allows users to add & remove rows which they’ll use to input their scores. The input rows gets created based on sample type selected & a pre-configured “template” (eg, going by my picture… I select hearts, and “germs, wholebird” & “Pseudomonas, Crubming” gets added as a default), but they can also append or remove rows as they see fit.

I’d like it so that when a user tabs, it’ll only tab through the textboxes, and not the dropdown boxes.

The 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

Well, the simplest way I can think of is to hijack your tab key whenever you are within one of your text boxes. I’ve put up a fiddle here which might give a general idea as to what I meant.

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

​

Edit – Using TabIndexes

While the piece of code above works as advertised, you may also want to check out using tabindex. I will admit, this is something that I did not know existed. But after reading through comments, decided this was something that may be more suited to your requirement. I’ve updated a fiddle to show how it works. Check it out

<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" />