'Skip' to next tabindex - forms/checkboxes

[DanLW]

Hello

Is it possible to skip to the next field in the tabindex on a form, bypassing all of the options in a checkbox list?

To save the user having to tab unnecessarily through checkbox fields, when none are to be checked, I'd like to give the user a keyboard option to skip to the next field. Mouse use is being avoided to speed data entry.

Can javascript be used to find the 'tabindex' value of the focussed field, and a hot key (event.keyCode) set up to pass focus to the next field in the tabindex (ie current tabindex + 1)?


<form ...
<input type="checkbox" name="cboxone" value="1" tabindex="1">Option 1<br>
<input type="checkbox" name="cboxone" value="2" tabindex="1">Option 2<br>
<input type="checkbox" name="cboxone" value="3" tabindex="1">Option 3<br>
<input type="checkbox" name="cboxone" value="4" tabindex="1">Option 4<br>

<input type="checkbox" name="cboxtwo" value="1" tabindex="2">Option 1<br>
<input type="checkbox" name="cboxtwo" value="2" tabindex="2">Option 2<br>
<input type="checkbox" name="cboxtwo" value="3" tabindex="2">Option 3<br>
<input type="checkbox" name="cboxtwo" value="4" tabindex="2">Option 4<br>

<input type="checkbox" name="cboxthree" value="1" tabindex="3">Option 1<br>
<input type="checkbox" name="cboxthree" value="2" tabindex="3">Option 2<br>
<input type="checkbox" name="cboxthree" value="3" tabindex="3">Option 3<br>
<input type="checkbox" name="cboxthree" value="4" tabindex="3">Option 4<br>

</form>

Thanks in advance

Dan

 

[BillyRayPreachersSon]

Yes.

Your fields would all have to have a tabIndex for this to work properly, I believe.

You would use the onkeypress (or onkeydown) event to read the "tabindex" attribute (you can use the "getAttribute" method to to this, and then scan through all elements within the form for one that has a tabindex one higher, then use to focus method to set focus on it.

What I don't understand is the statement you made about speed:

Mouse use is being avoided to speed data entry.

So instead of clicking directly in the field they want to go to, the user has to press a hot-key an arbitrary number of times (depending on what field they are in, and what field they want to go to). How exactly is that going to be faster?

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[DanLW]

Dan

Thanks for the help. Using 'getAttribute' to find the tabindex seems the way to go.

As far as speed goes, the form is used for data entry on an intranet. Users find it much easier to use the keyboard only, to enter data. It slows them down to take their hands off the keyboard and navigate with the mouse.

Some checkbox fields have 11 elements, but don't necessarily required entry. To save the user pressing 'tab' 11 times to get to the next field in such a case, I'm hoping to implement a 'hot key' to get them straight there.

Programmically it would be easier to make them click with the mouse in the next field, but if I can help them to keep their hands on the keyboard, AND work quickly, without much effort from me, great!

Cheers

Dan

 

[DanLW]

The following code works a treat!

<script language="JavaScript" type="text/javascript">
document.onkeypress = function(event)
{
// Triggered by the key stroke 'CTRL+g', which is keyCode 7.
// Sets focus in the field of the next tabindex to the field currently having focus

if (!event && window.event)
{
event = window.event;
}
if (window.event.keyCode == 7)
{
var formLength = document.recNEODEATHS.length; // Get number of elements in the form
var src = window.event.srcElement; // Gets the field having focus
var currentTabIndex = src.getAttribute('tabindex'); // Gets its tabindex

// scroll through all form elements and set focus in field having next tabindex
for (var i = 0; i <= formLength; i++)
{
if (document.recNEODEATHS.elements.getAttribute('tabindex') == currentTabIndex + 1)
{
for (var j = i; j <= formLength; j++)
{
if (document.recNEODEATHS.elements[j].disabled == false)
{
document.recNEODEATHS.elements[j].focus();
return;
}
}
}
}
}
}
</script>

Thanks

Dan