Version

Keyboard Navigation (igTextEditor)

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 caret one chunk to the right
Ctrl + Left Arrow Move the caret 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
Enter and Alt + Enter Go to new row in multiline text editor

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

igTextEditor with dropdown

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

Press To
Alt + Down Arrow or Down Arrow Open the dropdown, when the focus is in the input
Alt + Up Arrow or Esc Close the dropdown, when the focus is on the dropdown list
Up Arrow Close the dropdown, when the focus is on the top item of the dropdown list
Down Arrow Move to next item, when the focus is on the list of items
Up Arrow Move to previous item, when the focus is on the list of items
Enter Confirm focused item as selected
Enter or Alt + Up Arrow Reject focused item and keep old selection

View on GitHub