www.webdeveloper.com
Results 1 to 15 of 15

Thread: Using Arrows to navigate

  1. #1
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277

    Exclamation Using Arrows to navigate

    Hi Guys,

    I have done some research and cannot find anything appropriate. I would like to be able to navigate up and down the inside of a div (selecting A Tags) and directing to them when the user presses 'Enter'.

    Effectively need a function that records the up and down arrows and the enter key.

    It is for an autocomplete, I know there are jQuery things for this but I do not want to use jQuery!

    I need it to be fully browser compatible, does anyone have any suggestions?

    Thanks in Advance,

    Ben

  2. #2
    Join Date
    Oct 2010
    Posts
    5
    how about something like:
    HTML Code:
    yourDiv.onkeypress="handleEvent(event);"
    
    <script>
    function handleEvent(event) {
       switch (event.keyCode) {
          case 37 : // left
                  // ... code that handles left
          break;
          case 38 : // up
                  // ... code that handles up
          break;
          case 39 : // up
                  // ... code that handles right
          break;
          case 40 : // up
                  // ... code that handles down
          break;
       }
    }
    </script>
    ------------------------
    CieloClaro - Creación de sitios web

  3. #3
    Join Date
    Oct 2010
    Posts
    28
    keyCode doesnt work for firefox. use event.which instead

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by AlphaBravoX
    keyCode doesnt work for firefox.
    You are wrong. keyCode works for FF. The event is not well chosen. keyCode should be captured onkeydown or onkeyup, not onkeypress. Moreover: the event models are different between IE and the civilized rest of the World
    About event models and crossbrowser solutions:
    http://www.quirksmode.org/js/introevents.html
    About capturing the keystrokes:
    http://www.quirksmode.org/js/keys.html
    Last edited by Kor; 10-25-2010 at 12:39 PM.

  5. #5
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    I did hear that keyCode doesn't work in FF, but I trust you Kor.

    This is not the part of the script that I am having trouble with. The hard part is selecting the A tags, for instance.

    When someone presses the down arrow, not only does it change the style (class) so that it looks selected but also when you press 'Enter' it goes to the link. Is this possible?

  6. #6
    Join Date
    Oct 2010
    Posts
    45

    Not Divs but for Table Cells

    This probably won't help you, but here's an example of using arrow keys within a table. I'm working on this now to get the cursor to move to each textbox with the arrow keys.

    Code:
    <html>
    <head>
    <title>arrows.htm</title>
    <script type="text/javascript">
    var b4 = "";
    var col = 1;
    var row = 1;
    document.onkeyup = function() {
    if (window.event) {
    var key = window.event.keyCode;
    window.status = key;
    if (key == 37) { // left arrow
    if (col > 1) col--;
    } else if (key == 38) { // up arrow
    if (row > 1) row--;
    } else if (key == 39) { // right arrow
    if (col < 5) col++;
    } else if (key == 40) { // down arrow
    if (row < 5) row++;
    }
    bg();
    }
    }
    function bg() {
    var rc = "r" + row + "c" + col;
    if (b4 == "") b4 = rc;
    document.getElementById(b4).style.backgroundColor = "white";
    document.getElementById(rc).style.backgroundColor = "yellow";
    b4 = rc;
    }
    </script>
    </head>
    <body onload="bg()">
    <table border="1" width="500">
    <tr height="75">
    <th bgcolor="#FFFFFF" width="75"><sup>Use<br>Arrow<br>Keys</sup></th>
    <th bgcolor="#EEEEEE" width="75"><sup>Col 1</sup></th>
    <th bgcolor="#EEEEEE" width="75"><sup>Col 2</sup></th>
    <th bgcolor="#EEEEEE" width="75"><sup>Col 3</sup></th>
    <th bgcolor="#EEEEEE" width="75"><sup>Col 4</sup></th>
    <th bgcolor="#EEEEEE" width="75"><sup>Col 5</sup></th>
    </tr>
    <tr height="75">
    <th bgcolor="#EEEEEE"><sup>Row 1</sup></th>
    <th id="r1c1"><input type="text" /></th>
    <th id="r1c2"><input type="text" /></th>
    <th id="r1c3"><input type="text" /></th>
    <th id="r1c4"><input type="text" /></th>
    <th id="r1c5"><input type="text" /></th>
    </tr>
    <tr height="75">
    <th bgcolor="#EEEEEE"><sup>Row 2</sup></th>
    <th id="r2c1"><input type="text" /></th>
    <th id="r2c2"><input type="text" /></th>
    <th id="r2c3"><input type="text" /></th>
    <th id="r2c4"><input type="text" /></th>
    <th id="r2c5"><input type="text" /></th>
    </tr>
    <tr height="75">
    <th bgcolor="#EEEEEE"><sup>Row 3</sup></th>
    <th id="r3c1"><input type="text" /></th>
    <th id="r3c2"><input type="text" /></th>
    <th id="r3c3"><input type="text" /></th>
    <th id="r3c4"><input type="text" /></th>
    <th id="r3c5"><input type="text" /></th>
    </tr>
    <tr height="75">
    <th bgcolor="#EEEEEE"><sup>Row 4</sup></th>
    <th id="r4c1"><input type="text" /></th>
    <th id="r4c2"><input type="text" /></th>
    <th id="r4c3"><input type="text" /></th>
    <th id="r4c4"><input type="text" /></th>
    <th id="r4c5"><input type="text" /></th>
    </tr>
    <tr height="75">
    <th bgcolor="#EEEEEE"><sup>Row 5</sup></th>
    <th id="r5c1"><input type="text" /></th>
    <th id="r5c2"><input type="text" /></th>
    <th id="r5c3"><input type="text" /></th>
    <th id="r5c4"><input type="text" /></th>
    <th id="r5c5"><input type="text" /></th>
    </tr>
    </table>
    </body>
    </html>

  7. #7
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    This is a brilliant example, however I have tried it in FF and it doesn't work. Could you possibly implement the event.which method as well to make it browser compatible?

    Thank you

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Benji6996 View Post
    I did hear that keyCode doesn't work in FF, but I trust you Kor.
    You should trust me:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    document.onkeyup=function(e){
    var key=e?e.keyCode:event.keyCode;
    alert(key)
    }
    </script>
    </head>
    <body>
    
    </body>
    </html>

  9. #9
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    I concur, thank you Kor, you are indeed correct. Tested and works in FF. Is this because you are using the 'onkeyup' event handler? because the one above posted by bftrs2 does not work in FF?

    Do you have any suggestions to selecting elements on page? for instance, document.ATAG.focus(), would something like this work?

    Thank you

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Benji6996 View Post
    I concur, thank you Kor, you are indeed correct. Tested and works in FF. Is this because you are using the 'onkeyup' event handler?
    That means you have not read attentively my post #4. Once again:

    Quote Originally Posted by Kor
    keyCode works for FF. The event is not well chosen. keyCode should be captured onkeydown or onkeyup, not onkeypress. Moreover: the event models are different between IE and the civilized rest of the World
    About event models and crossbrowser solutions:
    http://www.quirksmode.org/js/introevents.html
    About capturing the keystrokes:
    http://www.quirksmode.org/js/keys.html

  11. #11
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    oh yes, thank you

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    As far as I know the focus() method woks crossbrowser only on form's elements. You can try it on links - I am not sure about the full compatibility. On the other hand, you need to capture the ENTER key as well, and to change the location.href of the document as the href value of the focused link when the ENTER is hit. Sounds not quite possible, but it worths a try, now that I have shown you a crossbrowser way to capture keys, which, in fact, was your primary exposed aim.
    Last edited by Kor; 10-25-2010 at 02:28 PM.

  13. #13
    Join Date
    May 2009
    Location
    Hampshire, UK
    Posts
    277
    I thought that might be the case.

    What I would like to achieve is something similar to the friends search function on facebook. I know it is possible but it is probably done with a different method.

  14. #14
    Join Date
    Oct 2010
    Posts
    28
    You are wrong. keyCode works for FF
    Thanks for enlighting me Why is there a which then, when keyCode is also working fine?

  15. #15
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by AlphaBravoX View Post
    Thanks for enlighting me Why is there a which then, when keyCode is also working fine?
    Well, the event model is one of the few which have no official standard so far. IE and Netscape(and later FF) have created their own models. Some things work crossbrowser, some don't.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles