Sign in to follow this  

[web] Cycling through input boxes

Recommended Posts

Is there any way to code a set of 10 x 10 inpux boxes such that the arrows keys can make the curser jump from one box to the next (similar to how excel works)? Currently, the only way I know of moving the cursor in an HTML form is to either use the mouse or press the tab key. Both methods I find to be highly inefficient. I really don't care what language I'd have to code it in (html, Xhtml, dhtml, flash, etc), but the simplier the better. Thanks.

Share this post

Link to post
Share on other sites
It should definitely be possible to write a javascript event handler which makes this happen.

To hook the events initially, you'd want to loop through all the 100 boxes. This can be done with a for loop on the form object, whose members will include the text boxes (input elements).

Alternatively you could use getElementsByTagName("input") to use a DOM1-style thing.

Then you should set your event handler for onkeypress (all lower case, not onKeyPress or onKEYPress or anything like that).

Once the event handler fires, you'll need to figure out
- What key was pressed (i.e. was it one you're interested in)
- Where the cursor is now
- Where you want to move it to

and then move it accordingly, probably by calling the focus() method on the relevant element.

Capturing event parameters is somewhat browser-specific (well, insofar as IE does it differently from every other browser). However it's not that difficult to code something which copes with both types.

Cancelling an event is also somewhat browser-specific (and maybe can't be done at all). You should be able to get away without cancelling the event in this case though.


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this