Disable default browser behavior to move curser right or left when pressing arrow keys in input field

Question

I am using Firefox to do this but it works in IE6 ... go figure.

Basically I have code written to traverse a grid of input elements using arrow keys. All of that is working just fine. I can move freely to any field using the arrow keys. When I use up or down arrows the select function seems to work correctly by selecting all text in the next field. (desired result)

document.getElementById(id).select();

However when I traverse left or right the text seems to be using a default browser function to move the cursor once to the left or right after the select happens forcing the user to select all the text again (undesired result).

Is there a way to disable that in firefox so my text gets selected correctly? The typical workflow for my users is to just hit the arrow key then start typing numbers ...then repeat.

Answer 1

From your description, it seems to me that you are trying to achieve a "spreadsheet" like effect. If thats the case, then the behaviour you are implementing could confuse users. e.g. in spread sheets the selection moves with arrow keys for each cell but if you have to edit a cell, you need to hit the enter key. That makes it editable and then hitting the enter key again will make it read-only

Answer 2

I'd say this behavior is caused by the keyup event. Did you try to stop it?

edit: yep, works fine when keyup event is cancelled : http://jsfiddle.net/D6ANY/1/