Keyboard Navigation

Tab control provides supports keyboard interaction. Using this functionality you can interact with control using keyboard. This is achieved by enabling ‘allowKeyboardNavigation’ to ‘true. By default this property value is set to ‘true’.

Following table illustrates the accessible key and their usage

Keys Behavior
Up Selected previous item.
Right Selected previous item.
Down Selected next item.
Left Selected next item.
Home Selected first item.
End Selected last item.

The following code example is used to render the Tab element in RTL format.

Add the following HTML to render Tab with keyboard navigation.

  • html
  • <div id="dish" style="width: 650px">
        <ul>
            <li><a href="#pizza">Pizza Menu</a></li>
            <li><a href="#sandwich">Sandwich Menu</a></li>
        </ul>
        <div id="pizza" style="background-color: #F5F5F5">
            <!--Food item description-->
            <p>Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
        </div>
        <div id="sandwich" style="background-color: #F5F5F5">
            <!--dish description-->
            <p>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>
        </div>
    </div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    module TabComponent {       
        $(function () {
             var sample = new ej.Tab($("#dish"),{
                     allowKeyboardNavigation: true 
             });
    
                //Control focus key
                $(document).on("keydown", function (e) {
                    if (e.altKey && e.keyCode === 74) {
                        // j- key code.
                        $("#dish ul a").focus();
                    }
                });
            });
    
    }

    The following screenshot illustrates the Tab with keyboard navigation.