ansaurus

Question

how to get the arrow keys on the keyboard to trigger navigation (previous/next page) links within a blog

Answer 1

+1 A:

Use this to tell you the keyIdentifier attribute of the object.

<html>
<head>

<script type="text/javascript">
  document.onkeydown = function() {
  alert (event.keyIdentifier);
}; 
</script>
</head>
<body>
</body>
</html>

Then you can use if-then logic to ignore all key presses you aren't interested in, and wire the correct behavior to the ones you are.

The following will assign the left and right arrow keys to your links (based on the id of the anchor/link elements).

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
    $(document).ready(function() {
            document.onkeydown = function() 
                {
                    var j = event.keyIdentifier
                    if (j == "Right")
                        window.location = nextUrl
                    else if (j == "Left")
                        window.location = prevUrl            
                        }
                   });

      $(document).ready(function() {
                    var nextPage = $("#next_page_link")
                    var prevPage = $("#previous_page_link")
                    nextUrl = nextPage.attr("href")
                    prevUrl = prevPage.attr("href")
                });

</script>
</head>
<body>
<p>
    <a id="previous_page_link" href="http://www.google.com"&gt;Google&lt;/a&gt; 
    <a id="next_page_link" href="http://www.yahoo.com"&gt;Yahoo&lt;/a&gt;
</p>
</body>
</html>

ecounysis 2010-02-14 00:47:09

`keyIdentifier` is not supported on most browsers (including the current version of Firefox), so is not suitable for general use on the web yet.

Tim Down 2010-02-14 11:40:14

Thanks for the info Tim. I only tested it in Chrome.

ecounysis 2010-02-14 16:46:42

thank you very much for your help eric the effort was appreciated

measles 2010-02-14 19:30:11

Answer 2

+2 A:

function leftArrowPressed() {
   // Your stuff here
}

function rightArrowPressed() {
   // Your stuff here
}

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            leftArrowPressed();
            break;
        case 39:
            rightArrowPressed();
            break;
    }
};

Tim Down 2010-02-14 11:45:20

nice work tim thanks a lot!

measles 2010-02-14 19:30:34

ansaurus

tags:

views:

answers:

how to get the arrow keys on the keyboard to trigger navigation (previous/next page) links within a blog

related questions