W
WilliamRLinden
Hi world! we are pretty new to JavaScript and have been
struggling for now 2 days on this problem ... We would
appreciate mercy if anyone can give us some.
Basically we are trying to simulate the tab key when the
down arrow key is pressed. (we know there are other way
to control focus flow but we use a lot of dynamic jsp fields,
that will make the flow control a nightmare, we just want
basic tabbing from the arrow key)
1)We are able to capture a onkeydown event and reasign it with another
key value with no problem within an html document without a form.
example:
var ieKey = event.keyCode;
if (ieKey == 40) {
event.keyCode = 9;
}
however as soon as we insert a form tag in the document, this stops
functioning.
The asignment seems to be fine as an alert clearly shows, but the
instruction
seems to be ignored.
Find below the working (with no form) and non working script (with a
form).
You should be able to just cut and paste the code.
Without form (works)
=============
<html>
<head>
<title>arrow keys test 2</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
function onLoadInit(){
document.onkeydown = keyDown;
}
function keyDown(e) {
var ieKey = event.keyCode;
if (ieKey == 38) {
alert("up arrow");
}
if (ieKey == 40) {
alert("down arrow");
event.keyCode = 9;
alert(event.keyCode);
}
}
</script>
</head>
<body onload="onLoadInit()" >
<center>
<strong><font size="+2">no form good</font></strong>
</center>
<BR> <input name="A" type="text" size="6">
<BR> <input name="B" type="text" size="6">
<BR> <input name="D" type="text" size="6">
<BR> <input name="E" type="text" size="6">
<BR> <input name="F" type="text" size="6">
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
</body>
</html>
With form (doesn't work)
==========
<html>
<head>
<title>arrow keys test 2</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
function onLoadInit(){
document.onkeydown = keyDown;
}
function keyDown(e) {
var ieKey = event.keyCode;
if (ieKey == 38) {
alert("up arrow");
}
if (ieKey == 40) {
alert("down arrow");
event.keyCode = 9;
alert(event.keyCode);
}
}
</script>
</head>
<body onload="onLoadInit()" >
<form name="form1" method="get">
<center>
<strong><font size="+2">arrows 5</font></strong>
</center>
<BR> <input name="A" type="text" size="6">
<BR> <input name="B" type="text" size="6">
<BR> <input name="D" type="text" size="6">
<BR> <input name="E" type="text" size="6">
<BR> <input name="F" type="text" size="6">
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
</form>
</body>
</html>
struggling for now 2 days on this problem ... We would
appreciate mercy if anyone can give us some.
Basically we are trying to simulate the tab key when the
down arrow key is pressed. (we know there are other way
to control focus flow but we use a lot of dynamic jsp fields,
that will make the flow control a nightmare, we just want
basic tabbing from the arrow key)
1)We are able to capture a onkeydown event and reasign it with another
key value with no problem within an html document without a form.
example:
var ieKey = event.keyCode;
if (ieKey == 40) {
event.keyCode = 9;
}
however as soon as we insert a form tag in the document, this stops
functioning.
The asignment seems to be fine as an alert clearly shows, but the
instruction
seems to be ignored.
Find below the working (with no form) and non working script (with a
form).
You should be able to just cut and paste the code.
Without form (works)
=============
<html>
<head>
<title>arrow keys test 2</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
function onLoadInit(){
document.onkeydown = keyDown;
}
function keyDown(e) {
var ieKey = event.keyCode;
if (ieKey == 38) {
alert("up arrow");
}
if (ieKey == 40) {
alert("down arrow");
event.keyCode = 9;
alert(event.keyCode);
}
}
</script>
</head>
<body onload="onLoadInit()" >
<center>
<strong><font size="+2">no form good</font></strong>
</center>
<BR> <input name="A" type="text" size="6">
<BR> <input name="B" type="text" size="6">
<BR> <input name="D" type="text" size="6">
<BR> <input name="E" type="text" size="6">
<BR> <input name="F" type="text" size="6">
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
</body>
</html>
With form (doesn't work)
==========
<html>
<head>
<title>arrow keys test 2</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script>
function onLoadInit(){
document.onkeydown = keyDown;
}
function keyDown(e) {
var ieKey = event.keyCode;
if (ieKey == 38) {
alert("up arrow");
}
if (ieKey == 40) {
alert("down arrow");
event.keyCode = 9;
alert(event.keyCode);
}
}
</script>
</head>
<body onload="onLoadInit()" >
<form name="form1" method="get">
<center>
<strong><font size="+2">arrows 5</font></strong>
</center>
<BR> <input name="A" type="text" size="6">
<BR> <input name="B" type="text" size="6">
<BR> <input name="D" type="text" size="6">
<BR> <input name="E" type="text" size="6">
<BR> <input name="F" type="text" size="6">
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
<center><a href="balls.html">View Document</a></center>
</form>
</body>
</html>