Using arrow keys to change <input> value

[Nefarta]

Good morning all...

I have a series of <input>s of type text each containg a string of length 4 representing a time, for example '0930'.

I would like the user to be able to change that string using the UP and DOWN arrow keys, so that pressing the UP arrow key would change the string to '0931' or pressing the DOWN arrow key would change it to '0929'.

Here is the code that creates the <input>s:

newInput = document.createElement('input');
newInput.type = 'text';
newInput.id = 'TimeEditInput_' + x + '_' + y + '_OUT';
eval("newInput[\"onblur\"] = function() { document.getElementById(\"" + newInput.id + "\").style.backgroundColor = \"lightgrey\";}; ");
newInput.className = 'TimeEditInput';
newInput.maxLength = 4;
newInput.value = '0930';

Can anyone point me in the right direction?

 

[Diancecht]

A good place to start:

http://www.geekpedia.com/tutorial138_Get-key-press-event-using-JavaScript.html

Cheers,
Dian

 

[theniteowl]

Will you be allowing manual input in the field other than using the arrows? If you set the readonly property on the input field it might cause the browser to interpret an arrow up/down key as a command to scroll the window instead of using it inside the input field. So to prevent scrolling of the screen you should not set readonly on the input fields but instead trap ALL keypresses while focus is on that field and return false for everything you do not consider acceptible so the character is never entered into the field.


Paranoid? ME?? Who wants to know????

 

[Nefarta]

Thanks to both of you. Diancecht pointed me in the right direction and theniteowl added two good points.

Nefarta