Don't know if anyone's interested, but here's the JavaScript (and apologies
in advance if you resent the OT).
The form grid is five text input columns wide by however many rows high
(dynamically determined). It's coded so that it skips the last column (so in
col 4, pressing right takes you to col 1 on the same row). Not fantastic,
but, hey, it works and the JavaScript book you all recommended hasn't
arrived yet ;-)
The most clunky bit is that I couldn't figure out how to pass to the
function the value of that input's position in the array, so it passes back
it's name instead. Then, moveCursor iterates through
document.forms[0].elements to see which name matches what was passed and
stores that array value.
BTW, anyone know how to do that? Would it be something like
"document.forms[0].elements[this]" ?
And only tested in IE5 so far.
In the text input boxes, put this:
onKeyDown="moveCursor(event.keyCode, this.name);"
And paste this into the HEAD:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
// This JavaScript allows the user to navigate around a
// grid-like matrix of form fields using the arrow keys.
// It assumes there are buttons at the end of the form.
function moveCursor(keyCode, inputName) {
// The number of cells wide in the form.
var width = 5;
// The number of submit and reset buttons at the end of the form.
var buttons = 2;
// Determine what element in the form object the cursor was in.
var element = 0;
for (i = 0; i < document.forms[0].elements.length; i++) {
if (document.forms[0].elements[i].name == inputName) {
var element = i;
}
}
// left arrow.
if (keyCode == 37) {
// if we're at the end of the row, wrap to the right
if ((element + 1) % width == 1) {
element = element + 3;
// otherwise, just go one to the left.
} else {
element--;
}
// up arrow
} else if (keyCode == 38) {
// if we're on the top row, wrap to the bottom.
if (element <= 4) {
element = width - element;
element = document.forms[0].elements.length - element - buttons;
// otherwise, just move one row up.
} else {
element = element - width;
}
// right arrow.
} else if (keyCode == 39) {
// if we're at the end of the row, wrap to the left
if ((element + 1) % width == 4) {
element = element - 3;
// otherwise, just go one to the right.
} else {
element++;
}
// down arrow.
} else if (keyCode == 40) {
// if we're on the bottom row, wrap to the top.
if (element >= document.forms[0].elements.length - (width + buttons))
{
element = document.forms[0].elements.length - element - buttons;
element = width - element;
// otherwise just move one row down.
} else {
element = element + width;
}
}
// Put focus on the new form input.
document.forms[0].elements[element].focus();
}
</SCRIPT>
--
Aidan Whitehall <[EMAIL PROTECTED]>
Macromedia ColdFusion Developer
Fairbanks Environmental +44 (0)1695 51775
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Get the mailserver that powers this list at http://www.coolfusion.com
FAQ: http://www.thenetprofits.co.uk/coldfusion/faq
Archives: http://www.mail-archive.com/cf-talk@houseoffusion.com/
Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
