Use TabIndex Form Field Focus in Specific Container

Using tab index attribute in HTML form fields a user can easily navigate to the next or previous field by merely using the keyboard. But after some presses, Tab index focus caret secretly goes to a new dimension where it becomes impossible to press tab to get back that caret guy in place. ultimately we use to move back caret guy in place.

So during a requirement where I wanted to trap carret guy in a wrapper so that even after continous tabbing caret we never be able to leave that defined wrapper. After defined at input field that will focus on first defined form field automatically.

Let’s start implementation

Step 1 – Add a sample form. I am adding almost all type of form elements here with a tab index defined. In a form, radio input field behaves differently we can check then by up down arrows only as checked in chrome browser.

<div class="dyno-tab-wrap">

    <h4>Input Text</h4>
    <input class="form-control" type="text" placeholder="Text Input tabindex#4 " tabindex="4" data-starttab="10" />

    <h4>Input Search</h4>
    <input class="form-control" type="search" placeholder="Search Input tabindex#5 " tabindex="5" />
    
    <h4>Input Checkbox</h4>
    <input class="form-control" type="checkbox" value="testcheck" tabindex="6" />
    
    <h4>Input Radio Group</h4>
    <input class="form-control" type="radio" name="testradio" value="testradio1" tabindex="7" />
    <input class="form-control" type="radio" name="testradio" value="testradio2" tabindex="7" />
    <input class="form-control" type="radio" name="testradio" value="testradio3" tabindex="7" />
    <input class="form-control" type="radio" name="testradio" value="testradio4" tabindex="7" />
    
    <h4>Input Button</h4>
    <input class="form-control" type="button" value="testbutton" tabindex="8" />
    
    <h4>Input Select</h4>
    <select class="form-control" tabindex="9">
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
    </select>

    <h4>Button</h4>
    <button class="form-control" tabindex="10" data-endtab="4">Button</button>

</div>

Step 2 – jQuery code having a function in which we can define StartIndex and last index. Following is JS code having self-explanatory comments.

<script>

$(document).ready(function() {
        //Page KeyDown Event Binding
        $(document).keydown(function(e) {
            if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
            if (e.keyCode == 9) {
                if (e.shiftKey) {
                    //Focus previous input
                    if (thisTab == startIndex) {
                        $("." + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                        return false;
                    }
                } else {
                    if (thisTab == lastIndex) {
                        $("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                        return false;
                    }
                }
            }
        });
        var setTabindexLimit = function(startIndex,lastIndex, tabContainer) {
                startIndex = startIndex;
                lastIndex = lastIndex;
                tabLimitInID = tabContainer;
                $("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
            }
        /*
            calling setTabindexLimit function
            setting 3 options
            #first is start Index Number
            #second is last Index Number
            #Defining Tabindex Wrapper Selector
        */
        setTabindexLimit(4,10,"dyno-tab-wrap");
});


</script>

See working demo here.

The user can use TAB and TAB+Shift operations on form in wrapper defined “dyno-tab-wrap”. TAB focus will jump to first after reaching the lastIndex.

Let me know if any modification or optimization can be done in code. 😃