Keyboard interaction
8 Jun 20173 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.
<div id="control">
<ej-listbox id="selectskills" [dataSource]="skillset" [fields]="fields" width="180px" height="220px"></ej-listbox>
</div>
export class AppComponent {
skillset: Array<any>;
fields: Object;
constructor() {
this.fields = { text: 'fonts' };
this.skillset = [
{ 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" }
];
}
}
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.