[…] Grid like table with keyboard navigation Posted on October 8, 2009 by Luke […]
]]>It not works!! to me…. what must i do? :S:S Do you have any new version?
]]>Hi,
Thanks for the post.
I think using keyup as the event will work for IE.
Also, might be good idea to try and use delegate() method of jQuery so you only have to attach one event handler…
Anup
]]>I was doing a form that required lots of input fields in a table (think excel) and had to develop something similar as well.
I had a solution for the up and down arrow to make it not rely on the input name. Thought I should share it here.
// For up arrow:
$(this).parent()
.parent()
.prev()
.children("td")
.eq($(this).parent().index())
.children("input")
.eq($(this).index())
.focus();
Basically the first eq() gets the TD index of the previous input, while the second eq() basically gets the INPUT index of the previous input. Hope this is useful.
]]>It only works in Firefox. It doesn’t work in IE and it doesn’t work in Safari.
]]>@ Steve:
Interesting idea. I didn’t really think about this, but it might work. I will actually look into hacking that up, and see how it compares to this.
Thanks.
]]>What’s the point of having so many input boxes? Seems excessive especially when it comes to loading a large number of rows and columns. Since a user can only update one cell at a time, wouldn’t it make more sense to change a cell into an input box upon onclick() of that table cell? That way you can load just a plain html table, and you only have one input box at any one time on the table. And through the magic of css you can style it to look however you want.
This could probably make the navigation part you’re trying to do a bit easier as well.
]]>@ Naum:
I haven’t used the grid plugin. It’s probably the better, more robust solution. Mine is a quick hack that popped into my head one day. :)
@ Dax:
I could probably get around that by checking the position of the cursor within the input box. It would probably add a considerable complexity to the script. Maybe in the next version.
Auto selecting is actually a good idea. Thanks for the tip.
e@ Mart:
Nah, that would probably be too complex and counter intuitive. I’d rather not have the users have to learn how to navigate the thing, but rather do what comes naturally. It should be possible to implement the left-right jump only if the cursor is at the beginning/end of the word. It’s just more work. :)
]]>I’m with Dax. I would prefer not to lose the ability to move the cursor to a specific place within the value box.
I’m quite comfy with the normal arrow key movements and tabbing. I’d imagine I’d be pretty frustrated if a dev implemented such a feature while I have to edit specific parts of the value in the whole spreadsheet.
How about instead of using just arrow keys to move, use Ctrl+arrow keys instead? Then using the arrows will move the cursor within the value, while holding Ctrl (or Command for macs) with the arrows navigates the input boxes. Possible to implement?
]]>Reflecting what Dax said, you lose the ability to manipulate the cursor position in the textbox. Maybe you want it to auto-select the content of the textbox when you arrive, so any typing replaces the content of the cell like in a spreadsheet.
]]>