0

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.

3
Contributors
3
Replies
12
Views
7 Years
Discussion Span
Last Post by R-Square
1

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

Votes + Comments
Excellent - many thanks
0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.