frankmorrison
asked on
Capture "Up Arrow" or "Down Arrow" to go to the previous or the next TabIndex
On the sample page below, I need a javascript function that will allow the user to change the focus to the previous or next tabindex using the "Up-arrow" or "Down-arrow" keys respectively.
I need a smart javascript function that will work with various forms on the same page. Any ideas?
============ sample code ===============
<html>
<head>
</head>
<body>
<form name="myform1">
<table>
<tr>
<td>
Form #1</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="1"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="2">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="3"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="4">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="5">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
<br>
<form name="myform2">
<table>
<tr>
<td>
Form #2</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="6"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="7">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="8"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="9">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="10">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
============ end of sample code ===============
I need a smart javascript function that will work with various forms on the same page. Any ideas?
============ sample code ===============
<html>
<head>
</head>
<body>
<form name="myform1">
<table>
<tr>
<td>
Form #1</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="1"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="2">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="3"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="4">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="5">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
<br>
<form name="myform2">
<table>
<tr>
<td>
Form #2</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="6"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="7">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="8"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="9">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="10">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
============ end of sample code ===============
ASKER
ljo8877:
I'm getting a syntax error on case: "Text":
What am I doing wrong? Here's the entire code:
=================== sample code by ljo8877 ==================
<html>
<head>
<script type="text/javascript">
function checkArrow(evt) {
if (!evt) evt = window.event; //if not others then IE
var keycode = evt.keyCode;
if (keycode == 38 || keycode == 40) { //Do stuff only if arrow key
/* Find the input field that triggered or contains the element that triggered the event */
var obj = (typeof evt.target != "undefine") ? evt.target : evt.srcElement;
while(obj.tagName.toLowerC ase() !="input" && obj.tagName.toLowerCase() !="FORM"){
obj= (typeof obj.parentNode != "undefined") ? obj.parentNode : obj.parentElement;
}
/* If an input field process */
if (obj.tagName.toLowerCase() == "input") {
/* Get current fields id */
var currentField = (typeof evt.target != "undefined") ? evt.target : evt.srcElement; //other or IE
var currentId = currentField.id;
var newID = null;
/* Determine next field */
switch (currentID) {
case: "Text":
if (keycode == 40) newID = "OptionButton1";
break;
case: "OptionButton1":
if (keycode == 38) newID = "Test";
else newID= "OptionButton2";
break;
case: "OptionButton2":
if (keycode == 38) newID = "OptionButton1";
else newID = "DropDown";
break;
case: "DropDown":
if (keycode == 38) newID = "OptionButton2";
else newID = "CheckBox";
break;
case: "CheckBox":
if (keycode == 38) newID = "DropDown";
break;
}
/* Move to new field */
if (newID) document.getElementByID(ne wID).focus ();
}
}
</script>
</head>
<body>
<form name="myform1" onkeydown="checkArrow(even t);">
<table>
<tr>
<td>
Form #1</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="1"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="2">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="3"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="4">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="5">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
<br>
<form name="myform2">
<table>
<tr>
<td>
Form #2</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="6"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="7">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="8"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="9">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="10">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
============== end of sample code by ljo8877
I'm getting a syntax error on case: "Text":
What am I doing wrong? Here's the entire code:
=================== sample code by ljo8877 ==================
<html>
<head>
<script type="text/javascript">
function checkArrow(evt) {
if (!evt) evt = window.event; //if not others then IE
var keycode = evt.keyCode;
if (keycode == 38 || keycode == 40) { //Do stuff only if arrow key
/* Find the input field that triggered or contains the element that triggered the event */
var obj = (typeof evt.target != "undefine") ? evt.target : evt.srcElement;
while(obj.tagName.toLowerC
obj= (typeof obj.parentNode != "undefined") ? obj.parentNode : obj.parentElement;
}
/* If an input field process */
if (obj.tagName.toLowerCase()
/* Get current fields id */
var currentField = (typeof evt.target != "undefined") ? evt.target : evt.srcElement; //other or IE
var currentId = currentField.id;
var newID = null;
/* Determine next field */
switch (currentID) {
case: "Text":
if (keycode == 40) newID = "OptionButton1";
break;
case: "OptionButton1":
if (keycode == 38) newID = "Test";
else newID= "OptionButton2";
break;
case: "OptionButton2":
if (keycode == 38) newID = "OptionButton1";
else newID = "DropDown";
break;
case: "DropDown":
if (keycode == 38) newID = "OptionButton2";
else newID = "CheckBox";
break;
case: "CheckBox":
if (keycode == 38) newID = "DropDown";
break;
}
/* Move to new field */
if (newID) document.getElementByID(ne
}
}
</script>
</head>
<body>
<form name="myform1" onkeydown="checkArrow(even
<table>
<tr>
<td>
Form #1</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="1"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="2">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="3"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="4">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="5">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
<br>
<form name="myform2">
<table>
<tr>
<td>
Form #2</td>
</tr>
<tr>
<td>
<input type="text" name="Text" size="20" tabindex="6"></td>
</tr>
<tr>
<td><input type="radio" value="A" name="OptionButton" tabindex="7">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="8"></td>
</tr>
<tr>
<td><select size="1" name="DropDown" tabindex="9">
<option selected value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox" name="CheckBox" value="T" tabindex="10">True</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
============== end of sample code by ljo8877
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Add the event handler -- either onkeydown or onkeyup, but not onkeypress -- to the form
<form name="myform1" onkeydown="checkArrow(even
In the head or your script file define the event handler keycode 38 is uparrow and 40 is downarrow.
<script type="text/javascript">
function checkArrow(evt) {
if (!evt) evt = window.event; //if not others then IE
var keycode = evt.keyCode;
if (keycode == 38 || keycode == 40) { //Do stuff only if arrow key
/* Find the input field that triggered or contains the element that triggered the event */
var obj = (typeof evt.target != "undefine") ? evt.target : evt.srcElement;
while(obj.tagName.toLowerC
obj= (typeof obj.parentNode != "undefined") ? obj.parentNode : obj.parentElement;
}
/* If an input field process */
if (obj.tagName.toLowerCase()
/* Get current fields id */
var currentField = (typeof evt.target != "undefined") ? evt.target : evt.srcElement; //other or IE
var currentId = currentField.id;
var newID = null;
/* Determine next field */
switch (currentID) {
case: "Text":
if (keycode == 40) newID = "OptionButton1";
break;
case: "OptionButton1":
if (keycode == 38) newID = "Test";
else newID= "OptionButton2";
break;
case: "OptionButton2":
if (keycode == 38) newID = "OptionButton1";
else newID = "DropDown";
break;
case: "DropDown":
if (keycode == 38) newID = "OptionButton2";
else newID = "CheckBox";
break;
case: "CheckBox":
if (keycode == 38) newID = "DropDown";
break;
}
/* Move to new field */
if (newID) document.getElementByID(ne
}
}
</script>