Navigation through inputs using arrow keys
This page demonstrates spreadsheet like navigation via arrow keys. It works by handling onkeydown events and a known input field naming scheme (in this case a1, a2, b3 etc).
Handling Enter, Up and Down keys is easy, but Left and Right keys need to allow for the cursor moving within inputs. In this example, which works for I.E and Gecko...
- Navigating onto an input selects it entirely (for replacement when typing begins).
- If on a wholely selected input the Left arrow is pressed, focus will navigate to the next left input.
- When editing an input and a arrow is pressed: the cursor will move normally within the input, unless the cursor is at the edge when it will navigate to the next input.
- If on a wholely selected input the Right arrow is pressed, this means the cursor will move to the end of the input instead of navigating.
In this example navigation wraps at edges, this is not neccessary for the technique and is an entirely optional implementation.
| A | B | C | D | E | F | |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | ||||||
| 3 | ||||||
| 4 | ||||||
| 5 | ||||||
| 6 |