controlling the cusor position and tabs
Hello,
I am new to this forum and I have done a fair bit of searching but just can't seem to find what I am looking for. I have a web form with about 15 fields and I want to be able to control where the cursor goes when tabbing or using the arrow keys. I almost have the code but not quite.
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
function setFocus(previous,next) {
var key;
if (window.event)
{
key = window.event.keyCode;
}
else if(e)
{
key = e.which;
}
else
{
key = null;
}
switch(key)
{
case 9:
//alert("tab");
break;
case 13: // Enter Key
document.getElementById(next).focus();
break;
case 37: // Left Arrow
document.getElementById(previous).focus();
break;
case 38: // Up Arrow
document.getElementById(previous).focus();
break;
case 39: // Right Arrow
document.getElementById(next).focus();
break;
case 40: // Down Arrow
document.getElementById(next).focus();
break;
}
}
</script>
</head>
<body >
<form name="sampleform">
<input type="text" name="first" size=4 maxlength=3 onkeyup="setFocus('fifth','second')" tabindex="1">1 <br/>
<input type="text" name="second" size=4 maxlength=3 onkeyup="setFocus('first','third')" tabindex="2"> 2 <br/>
<input type="text" name="third" size=4 maxlength=3 onkeyup="setFocus('second','fourth')" tabindex="3">3 <br/>
<input type="text" name="fourth" size=4 maxlength=3 onkeyup="setFocus('third','fifth')" tabindex="4">4 <br/>
<input type="text" name="fifth" size=4 maxlength=3 onkeyup="setFocus('fourth','first')" tabindex="5"> 5
</form>
</body>
</html>
The problem with this code is I am not able to capture the "Shift+Tab" combination. Anyone know a better way to accomplish what I am trying to do? Thanks in advance for the help!
