Tab Roving – focus management for element groups

Tables and data grids in the web are everywhere – luckily, most are for data viewing, but sometimes, you'll end up needing edit functionality in a grid layout, like an Excel spreadsheet. Unfortunately, things immediately become a little trickier once a grid is made up of interactive elements like inputs. The tricky thing I want to talk about today in these interfaces is focus management. To illustrate, let's draw up the simplest of spreadsheets. We'll grab some inputs and arrange them in a grid. I've applied some styling so it looks and feels like your average spreadsheet software (except you can't edit this one). Sheet #1 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 Auto-Play Start Reset Keyboard Tab Tab Back You can use the control buttons to tab through the table, or use the auto-play functionality if you're lazy! The currently focused cell will be highlighted in Green. Now, try selecting input 29 and see what happen ... Read full article.