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!
Is there a reason why you need to worry about Shift-tab and tab key presses? I haven't found anything about a keycode being sent for Shift-tab, so you might have to just put up with that default behaviour. However, I was poking around with your concept a little bit and this is what I've hacked together. It uses the form elements element to determine what field is next or prior without having to pass that information in each call to the function.
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(e,input)
{
var key;
if (window.event){key = window.event.keyCode;}
else if(e.which){key = e.which;}
else{key = null;}
var forward = null;
var back = null;
switch(key)
{
case 13: // Enter Key
forward = true;
break;
case 37: // Left Arrow
back = true;
break;
case 38: // Up Arrow
back = true;
break;
case 39: // Right Arrow
forward = true;
break;
case 40: // Down Arrow
forward = true;
break;
}
if(forward)
{
goForward(input);
}
else if(back)
{
goBack(input);
}
}
function goBack(input)
{
var form_name = input.form.id;
var next = input.tabIndex;
var len = document.getElementById(form_name).length;
if(next == "1")
{
document.getElementById(form_name).elements[len - 1].focus();
}
else
{
document.getElementById(form_name).elements[next - 2].focus();
}
}
function goForward(input)
{
var form_name = input.form.id;
var next = input.tabIndex;
if(next == document.getElementById(form_name).length)
{
document.getElementById(form_name).elements[0].focus();
}
else
{
document.getElementById(form_name).elements[next].focus();
}
}
</script>
</head>
<body >
<form name="sampleform" id="sampleform">
<input type="text" name="first" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="1">1<br/>
<input type="text" name="second" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="2">2<br/>
<input type="text" name="third" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="3">3<br/>
<input type="text" name="fourth" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="4">4<br/>
<input type="text" name="fifth" size=4 maxlength=3 onkeyup="setFocus(event,this)" tabindex="5"> 5<br/>
</form>
</body>
</html>
Reply With Quote
Bookmarks