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.

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

commented: Excellent - many thanks +1

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

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

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.