Use the arrowkeys to navigate a webpage using javascript
For a demo I was looking into the possibility of using a Vista MCE Remote controller to navigate a web portal. I found out that the arrow keys are the same as a keyboard arrow key and the “ok” button equals the “enter” key. So, now I needed to find a way to use the arrow keys to navigate.
The solution I used is to use jsquery.js with the following code:
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
var x=1;
function init()
{
$("#" + x).css("text-decoration","underline");
}
$(document).keydown(function(e)
{
$("#" + x).css("text-decoration","none");
if (e.keyCode == 13) {
$("#" + x).click();
}
if (e.keyCode == 37) {
x--;
}
if (e.keyCode == 38) {
x=x-16;
}
if (e.keyCode == 39) {
x++;
}
if (e.keyCode == 40) {
x=x+16;
}
if (x > 32)
x=32;
if (x < 1)
x=1;
$("#" + x).css("text-decoration","underline");
// no scrolling
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
});
window.onload = init;
</script>
Each of the clickable links was defined as follows:
<a href="bla.php?id=1"><span id="1">Number 1</span></a> <a href="bla.php?id=2"><span id="2">Number 2</span></a>
Works like a charm!