Thanks Jonas.
I had a look the at URL mentioned, pretty close to what we needed but
didn't realy shed any light on why our script didn't work when using a
form.
Now, just in case this might one day help some one else, here is how we
finally solved the problem:
The true purpose of us needing the script was to capture arrow key
presses and then to use these to navigate between the elements on a web
page, instead of using the tab and shift+tab key to tediously navigate
from element to element in the specified tab order.
In the end I changed the approach completely and instead of simulating
tab key presses I created a virtual grid with each element (html tag)
to be navigated to/from containing X and Y coordinates as two
additional parameters in the tag declaration. Then when an arrow key
event is captured I simply focus directly on the next element using the
coordinate system to identify which tag should receive the focus next.
************************************************** *************
Here is the JavaScript (I used a file called arrowNav.js)
************************************************** *************
var Xval,Yval,xMaxArray;
var yMax = 0;
function setXY() {
Xval = document.activeElement.x;
Yval = document.activeElement.y;
}
function getMax() {
//Work Out maximum Y
//------------------
for (var i=0;i < document.all.length;i++) {
if (document.all[i].y > yMax) {
yMax = document.all[i].y;
}
}
xMaxArray = new Array(yMax+1);
for (var i=0;i<(yMax+1);i++)
xMaxArray[i] = 0;
//Work Out maximum X's
//--------------------
for (var i=0;i < document.all.length;i++) {
if (document.all[i].x > xMaxArray[document.all[i].y]) {
xMaxArray[document.all[i].y] = document.all[i].x;
}
}
}
function handleKey(evt) {
var ieKey;
//if (window.Event) ieKey = evt.which;
//else ieKey = event.keyCode;
ieKey = event.keyCode;
//Move Up
//-------
if (ieKey == 38) {
// Make sure we or not as high as we can go
//-----------------------------------------
if (Yval > 1) {
Yval--;
// If we are moving to a row with less elements i.e less X
coordinates
// make sure we re-adjust x grid value to reflect the max for that
row
//---------------------------------------------------------------------
if (Xval > xMaxArray[Yval]) {
Xval = xMaxArray[Yval];
}
for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}
//Move Down
//---------
if (ieKey == 40) {
// Make sure we or not as low as we can go
//-----------------------------------------
if (Yval < yMax) {
Yval++;
// If we are moving to a row with less elements i.e less X
coordinates
// make sure we re-adjust x grid value to reflect the max for that
row
//---------------------------------------------------------------------
if (Xval > xMaxArray[Yval]) {
Xval = xMaxArray[Yval];
}
for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}
//Move Right
//----------
if (ieKey == 39) {
//alert(document.all['T1'].type);
if (!((document.activeElement.type == "text") &&
(document.activeElement.value != ""))) {
// Make sure we or not as far right as we can go
//----------------------------------------------
if(Xval < xMaxArray[Yval]) {
Xval++;
for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}
}
//Move Left
//---------
if (ieKey == 37) {
if (!((document.activeElement.type == "text") &&
(document.activeElement.value != ""))) {
// Make sure we or not as far left as we can go
//---------------------------------------------
if (Xval > 1) {
Xval--;
for (var i=0;i < document.all.length;i++)
if ((document.all[i].x == Xval) && (document.all[i].y ==
Yval)) {
//alert(document.all[i].name)
document.all[i].focus();
}
}
}
}
return fals;
}
// Add main document event Listener
document.onkeydown=handleKey;
**************************************************
AN HTML FILE USING THE SCRIPT
**************************************************
<html>
<head>
<title>God damn Arrows</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<!-- Specify arrowNav.js as the file containing the script -->
<script src="arrowNav.js"> </script>
</head>
<!-- Call getMax() function on body load to ensure script can
calculate
Maximum X,Y grid values ------------------------------------------->
<body onload="getMax()">
<form name="form1">
<center>
<font size="+2">The <b>ultimate</b> arrow key TesT ... ever</font>
</center>
<BR> <center><a name="L1" x="1" y="1" href="balls.html">Link1 (1,1)</a>
<BR><BR> <input name="T1" value="Text1 (1,2)" x="1" y="2" type="text"
onfocus="setXY()">
<input name="T2" value="Text2 (2,2)" x="2" y="2" type="text"
onfocus="setXY()">
<BR><BR> <a name="L2" x="1" y="3" href="balls.html" onfocus="setXY()">
Link2 (1,3)</a>   some irelavant text  
<a name="L3" x="2" y="3" href="balls.html" onfocus="setXY()"> Link3
(2,3)</a>  
<a name="L4" x="3" y="3" href="balls.html" onfocus="setXY()"> Link4
(3,3)</a>  
<a name="L5" x="4" y="3" href="balls.html" onfocus="setXY()"> Link5
(4,3)</a>
<BR> <a name="L6" x="1" y="4" href="balls.html" onfocus="setXY()">
Link6 (1,4)</a>   some irelavant text  
<a name="L7" x="2" y="4" href="balls.html" onfocus="setXY()"> Link7
(2,4)</a>  
<a name="L8" x="3" y="4" href="balls.html" onfocus="setXY()"> Link8
(3,4)</a>  
<a name="L9" x="4" y="4" href="balls.html" onfocus="setXY()"> Link9
(4,4)</a>
<BR><BR> <input name="T3" value="Text3 (1,5)" x="1" y="5" type="text"
onfocus="setXY()">
<BR><BR> Some more useless text
<BR><BR> <input name="T4" value="Text4 (1,6)" x="1" y="6" type="text"
onfocus="setXY()">
<input name="T5" value="Text5 (2,6)" x="2" y="6" type="text"
onfocus="setXY()">
</center>
</form>
</body>
</html>
It looks a little but chaotic, but thats just the text wrapping, copy
and paste into a proper editor and it should all come out a bit
clearer.
With a bit of luck this might actually save the universe one day.
And remember:
Beer is not the answer, it is the question...the answer is YES!!!!
ciao
will
