By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,894 Members | 2,193 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,894 IT Pros & Developers. It's quick & easy.

Navigate table rows using arrow keys

P: n/a
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

Aug 26 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
tom
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

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

regards,
Tom

Aug 26 '05 #2

P: n/a
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

Aug 26 '05 #3

P: n/a
tom wrote:
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


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.getElementById('xx');
var e = e || event ;
msg.innerHTML = keys[e.keyCode] || '';
}

</script>
</head>
<body onkeyup="KeyCheck(event);">
<p>The key you pressed was:
c</p>
</body>
[...]
--
Rob
Aug 27 '05 #4

P: n/a
ASM
RobG wrote:
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'
}
Waou ! wonderful !
Is it an array ? object ? whatelse ?
function KeyCheck( e ) {
var msg = document.getElementById('xx');
var e = e || event ;
msg.innerHTML = keys[e.keyCode] || '';
msg.innerHTML = keys[e.keyCode] || e.keyCode;

would be instersting to see some key codes :-)
}

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


document.getElementById('xx') outside with the dog ?
--
Stephane Moriaux et son [moins] vieux Mac
Aug 27 '05 #5

P: n/a
ASM wrote:
RobG wrote:
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'
}

Waou ! wonderful !
Is it an array ? object ? whatelse ?


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...

[...]
document.getElementById('xx') outside with the dog ?


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
Aug 28 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.