Keyboard interaction

28 Jun 20174 minutes to read

To use the Keyboard shortcut keys as an alternative for mouse actions to interact with the ListBox component. Refer to the following table for details of the short cut keys and its corresponding usage.

Shortcut Key	Single Selection	Multi Selection
Up	Selects to previous item	Selects to previous item and clear all existing selection
Down	Selects to next item	Selects to next item and clear all existing selection
Left	Selects to previous item	Selects to previous item and clear all existing selection
Right	Selects to next item	Selects to next item and clear all existing selection
Home	Selects to first list item	Selects to first item and clear all existing selection
End	Selects to last list item	Selects to last item and clear all existing selection
Page Up	Selects the item in list item (i.e.,) scrolls up to next set of items	Selects the item in list item (i.e.,) scrolls up to next set of items and clear all existing selection
Page Down	Selects the item in list item (i.e.,) scrolls down to next set of items	Selects the item in list item (i.e.,) scrolls down to next set of items and clear all existing selection
Shift + up	Selects the previous item in list item	Selects the immediate preceding item from current selected item
Shift + Down	Selects the next item in list item	Selects the immediate successive item from current selected item
Shift + Home	Selects the first list item	Selects all items between focused item to first item
Shift + End	Selects the last list item	Selects all items between focused item to last item
Shift + Page Up	Selects the first list item	Selects all item between focused item to previous set of list items
Shift + Page Down	Selects the last list item	Selects all item between focused item to next set of list items
Ctrl + Up	Selects the item in list item (i.e.,) scrolls up to previous set of items	Selects the item in list item (i.e.,) scrolls up to previous set of items and clear all existing selection
Ctrl + Down	Selects the item in list item (i.e.,) scrolls down to next set of items	Selects the item in list item (i.e.,) scrolls down to next set of items clear all existing selection

NOTE

Initial focus can be done by pressing tab key multiple times until it is focused.

HTML

<div id="control">
        <ul id="selectfont" ej-listbox e-datasource="dataList" e-fields-value="value" e-fields-text="text"></ul>
    </div>

JAVASCRIPT

$scope.dataList = [
              { fonts: "Algerian" },
              { fonts: "ARIAL" }, { fonts: "Bimini" }, { fonts: "Courier" },
              { fonts: "Cursive" }, { fonts: "Fantasy" }, { fonts: "Georgia" }, { fonts: "Impact" },
              { fonts: "New york" }, { fonts: "Sans-Serif" }, { fonts: "Scripts" }, { fonts: "Times" },
              { fonts: "Times New Roman" }, { fonts: "Verdana" }, { fonts: "Western" }, { fonts: "Zapfellipt bt" }
             ];
             $scope.value = "fonts";
             $scope.text = "fonts";
             $document.bind("keydown", function (e) {
                 if (e.altKey && e.keyCode === 74) { // j- key code.
                     var target = $('#selectfont').data("ejListBox");
                     if (!ej.isNullOrUndefined(target)) {
                         target.selectItemByIndex(0);
                         $("#selectfont_container").focus();
                     }
                 }
             });

Note:

Round robin method is used on navigating through the list items in listbox, so that navigation will continue when reaching the start/end of the list item.