Navigate table rows using arrow keys

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • skipc@valley.net
    #1

    Navigate table rows using arrow keys

    Hi,

    I am stuck... I've got a popup window that displays a list in table
    format with links on the bottom to navigate the list <prev> 1 2 3 ...
    <next>

    When I demo'd to the users... they immediately asked if they could use
    the arrow keys and enter key to navigate the list. I think there must
    be a way to do this, but I can't figure it out.

    Has anyone out there done this? I would like to keep the mouse
    navigation but add the ability to navigate using the keyboard.

    Thanks! D

    Tags: None
    • tom
      #2
      Re: Navigate table rows using arrow keys

      Yes, you can do that...

      yo need to capture the key pressed by user, i recommend check this
      page, there you can find the way to do that

      http://www.geekpedia.com/tutorial138_Get-key-press-event-using-JavaScript.html


      After you have gotten the key, you can move the focus from one link to
      another, in a little javascript function.

      regards,
      Tom

        Comment

        • skipc@valley.net
          #3
          Re: Navigate table rows using arrow keys

          Tom,
          Thanks. That helps. I think I've got all the pieces. I think I have to
          figure out which row in the table the user is on, add or decrement and
          focus on the new row. I will keep working on it.

          -D

            Comment

            • RobG
              #4
              Re: Navigate table rows using arrow keys

              tom wrote:[color=blue]
              > Yes, you can do that...
              >
              > yo need to capture the key pressed by user, i recommend check this
              > page, there you can find the way to do that
              >
              > http://www.geekpedia.com/tutorial138...avaScript.html
              >[/color]

              That script could be somewhat more compact as:

              <script type="text/javascript">

              var keys = { 16:'shift', 17:'Ctrl', 18:'Alt', 19:'Pause',
              37:'Arrow Left', 38:'Arrow Up', 39:'Arrow Right',
              40:'Arrow Down'
              }

              function KeyCheck( e ) {
              var msg = document.getEle mentById('xx');
              var e = e || event ;
              msg.innerHTML = keys[e.keyCode] || '';
              }

              </script>
              </head>
              <body onkeyup="KeyChe ck(event);">
              <p>The key you pressed was:
              c</p>
              </body>


              [...]


              --
              Rob

                Comment

                • ASM
                  #5
                  Re: Navigate table rows using arrow keys

                  RobG wrote:[color=blue]
                  > That script could be somewhat more compact as:
                  >
                  > <script type="text/javascript">
                  >
                  > var keys = { 16:'shift', 17:'Ctrl', 18:'Alt', 19:'Pause',
                  > 37:'Arrow Left', 38:'Arrow Up', 39:'Arrow Right',
                  > 40:'Arrow Down'
                  > }[/color]

                  Waou ! wonderful !
                  Is it an array ? object ? whatelse ?
                  [color=blue]
                  > function KeyCheck( e ) {
                  > var msg = document.getEle mentById('xx');
                  > var e = e || event ;
                  > msg.innerHTML = keys[e.keyCode] || '';[/color]

                  msg.innerHTML = keys[e.keyCode] || e.keyCode;

                  would be instersting to see some key codes :-)
                  [color=blue]
                  > }
                  >
                  > </script>
                  > </head>
                  > <body onkeyup="KeyChe ck(event);">
                  > <p>The key you pressed was:
                  > c</p>
                  > </body>[/color]

                  document.getEle mentById('xx') outside with the dog ?


                  --
                  Stephane Moriaux et son [moins] vieux Mac

                    Comment

                    • RobG
                      #6
                      Re: Navigate table rows using arrow keys

                      ASM wrote:[color=blue]
                      > RobG wrote:
                      >[color=green]
                      >> That script could be somewhat more compact as:
                      >>
                      >> <script type="text/javascript">
                      >>
                      >> var keys = { 16:'shift', 17:'Ctrl', 18:'Alt', 19:'Pause',
                      >> 37:'Arrow Left', 38:'Arrow Up', 39:'Arrow Right',
                      >> 40:'Arrow Down'
                      >> }[/color]
                      >
                      >
                      > Waou ! wonderful !
                      > Is it an array ? object ? whatelse ?[/color]

                      I think it's an object, my browser agrees. ;-)

                      Another way is:

                      var keys = new Object();
                      keys[16] = 'shift';
                      keys[17] = 'Ctrl';
                      ...

                      But I like my way 'cos it's much more concise, though sometimes the
                      longer method is better for maintenance reasons 'cos it's a bit more
                      readable.

                      I'm sure there's a French equivalent for 'to each her own'. All I can
                      think of is 'Que sera sera' which doesn't seem appropriate...

                      [...][color=blue]
                      >
                      > document.getEle mentById('xx') outside with the dog ?[/color]

                      If I had a dog it would have died of a persecution complex long ago. it
                      seems my fingers forgot to type everything my brain told them to.

                      "I've done my homework, I just haven't written it down yet" :-x



                      --
                      Rob

                        Comment

                        Previous template Next
                        Working...