Using arrow keys to navigate around inside an HTML form

[haggis-man]

A client would like me to implement spreadsheet-style form traversal using the arrow keys on a keyboard, i.e. left arrow would submit the entry for that field and then move left by one field on the form.

The form is managed by my PHP code.

Does anyone have a browser-independent method of doing this please?

All input fields in the form are single line text fields.

[Traevel]

Hi there,

While testing the form you described I found typing with such alterations to be extremely annoying, but here goes :P

var col = 4; //number of 'cells' in a row
var current;
var next;
document.onkeydown = check;
function check(e){
	if (!e) var e = window.event;
		(e.keyCode) ? key = e.keyCode : key = e.which;
	var num = document.getElementById("Table").getElementsByTagName("input").length;
	try{
		switch(key){
			case 37: next = current - 1; break; 		//left
			case 38: next = current - col; break; 		//up
			case 39: next = (1*current) + 1; break; 	//right
			case 40: next = (1*current) + col; break; 	//down
		}
		if (key==37|key==38|key==39|key==40){
			/* Submit etc.*/
			var code=document.forms['Table'].elements['c' + current].value;
			if(code!=""){alert(code);}
			document.forms['Table'].elements['c' + next].focus();
			current = next;
		}		
	}catch(Exception){}
}
function setCurrent(element){
	var string = element.id;
	current = string.slice(1,string.length);
}

With some HTML to test...

<form id="Table" name="Table" onKeyPress="javascript:check">
	<input id="c1" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c2" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c3" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c4" onClick="setCurrent(this);" type="text" value=""/><br>
	<input id="c5" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c6" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c7" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c8" onClick="setCurrent(this);" type="text" value=""/><br>
	<input id="c9" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c10" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c11" onClick="setCurrent(this);" type="text" value=""/>
	<input id="c12" onClick="setCurrent(this);" type="text" value=""/><br>
</form>

I wasn't really sure if something like this is what you meant, but it should work in the latest FF and IE, although I haven't tested it as much as I should have :$. Still, I hope this helps a little.

Good luck,

Traevel

[haggis-man]

THANK YOU, THANK YOU, THANK YOU !!

That is exactly what he asked for (despite my pointing out that his webpage would act like no other).

I'm pretty sure I can fit this into my application - I can read and understand your code but I'd never have got there myself in a 1000 years.

For the record, this does work in latest versions of FF, IE, Chrome and Opera browsers.

Many many thanks once again

[R-Square]

Thank you sooooooooooooo much Traevel. Fantastic!!!. This is what i am looking for and hope all were looking for. Thanks and keep helping us :)

[Angie64]

i tried this code and it did not move the arrow keys. i just copied and pasted this and it did not move the arrow keys, is there something Im not doing?
Thanks
Angie