Hi there. I am trying to use a keyhandler function to change the focus to different list items. So, when the user hits the page down key, for example, I want to focus on the list item below the one that currently has focus. Similarly for page up. Roughly, I have the following setup:
<html>
<head><title>blah</title></head>
<body>
<ul>
<li id="li0">item1</li>
<li id="li1">item2</li>
<li id="li2">item3</li>
<li id="li3">item4</li>
<li id="li4">item5</li>
<li id="li5">item6</li>
<li id="li6">item7</li>
</ul>
<script type="text/javascript">
var KEY_ONE = 10;
var KEY_TWO = 11;
//etc
//focus on first item in list
document.getElementById('li0').focus();
document.onkeypress = keyhandler;
function keyhandler(ev){
ev = ev||event;
switch(ev.keyCode){
case KEY_ONE:
//do something
break;
case KEY_TWO:
//do something else
break;
//etc
}
return false;
}
</script>
</body>
</html>
I guess I have to keep track of which one is currently focused, add/subtract 1 to the id then focus on that one? How would I go about this?
Thanks