Version

Keyboard Navigation (igNumericEditor)

Topic overview

This topic explains how to use keyboard navigation so that end-users can easily and quickly navigate through inputs and interact with them.

In this topic

This topic contains the following sections:

Standard Keyboard interactions

You can use the standard key combinations for functionalists such as copy, cut, paste, undo and redo and these further ones.

Press To
Right Arrow Move the mouse indicator one char to the right
Left Arrow Move the mouse indicator one char to the left
Ctrl + Right Arrow Move the mouse indicator one chunk to the right
Ctrl + Left Arrow Move the mouse indicator one chunk to the left
Ctrl + Home or just Home Move the mouse indicator to the start of the input
Ctrl + End or just End Move the mouse indicator to the end of the input
Backspace Delete the previous char
Delete Delete the following char
Ctrl + Backspace Delete the previous chunk
Ctrl + Delete Delete the following chunk
Delete or Backspace Delete selected content
Up Arrow Increment the number in the input
Down Arrow Decrement the number in the input

Selecting the editor

In this section you can see the key combinations that can be used to focus the editor and select part of its value or the whole one.

Press To
Tab or Shift + Tab Focus the editor
Shift + Tab Focus the previous component
Tab Focus the following component
Shift + Right Arrow Select char to the right
Shift + Left Arrow Select char to the left
Ctrl + Shift + Right Arrow Select to current chunk end or select one chunk to the right
Ctrl + Shift + Left Arrow Select to current chunk start or select one chunk to the left
Ctrl + Shift + Home or Shift + Home Select value in the input till start
Ctrl + Shift + End or Shift + End Select value in the input till end
Ctrl + A Select the whole value in the input

igNumericEditor with dropdown

In this section you can see what key combinations can be used when you have a numeric editor with dropdown.

Press To
Alt + Down Arrow Open the dropdown, when the focus is in the input
Alt + Up Arrow Close the dropdown, when the focus is in the input
Down Arrow or Up Arrow Navigate through the list items
Enter Confirm focused item as selected
Enter or Alt + Up Arrow Reject focused item and keep old selection

View on GitHub