arrow keys through list of div cursor links

C

cantrell78

I'm dynamically building a list of divs that a user can click and sets
off an action. I was hoping to build into it a way to use the up and
down arrow keys to navigate the list and the enter key to select the
one that is focused - any idea how I could achieve this?

it's basically this:

<div style="cursor:pointer; cursor:hand;" onClick="return
callAction('1')">item 1</div>
<div style="cursor:pointer; cursor:hand;" onClick="return
callAction('2')">item 2</div>
<div style="cursor:pointer; cursor:hand;" onClick="return
callAction('3')">item 3</div>
 
T

Thomas 'PointedEars' Lahn

I'm dynamically building a list of divs that a user can click and sets
off an action. I was hoping to build into it a way to use the up and
down arrow keys to navigate the list and the enter key to select the
one that is focused - any idea how I could achieve this?
Click to expand...

You should use a `select' element, then it becomes much easier.
it's basically this:

<div style="cursor:pointer; cursor:hand;" onClick="return
callAction('1')">item 1</div>
<div style="cursor:pointer; cursor:hand;" onClick="return
callAction('2')">item 2</div>
<div style="cursor:pointer; cursor:hand;" onClick="return
callAction('3')">item 3</div>
Click to expand...

Yuck.


PointedEars
 
L

Laser Lips

Not one of the arrow keys returns anything


try it...

<body onkeypress='alert(event.keyCode)'></body >
 
T

Thomas 'PointedEars' Lahn

Laser said:
Not one of the arrow keys returns anything


try it...

<body onkeypress='alert(event.keyCode)'></body >
Click to expand...

To whom and to what are you referring to?


PointedEars
 
L

Laser Lips

(e-mail address removed) wants to basically move up and down through divs
using the arrow key. Moveing through them probably means highlighting
them adn then, as he says, initiaiting an action. But you cant do
that using the arrow key because in JavaScript the arrow keys do not
give of any event.
 
L

Laser Lips

I stand corrected ...


function handleArrowKeys(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {

alert(evt.keyCode);
switch (evt.keyCode) {
case 37:

break;
case 38:

break;
case 39:

break;
case 40:

break;
}
}
}

document.onkeyup = handleArrowKeys;
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Survey details won't go through using php, ajax, Mysql 0
All CRUD operations work except POST. Why? 2
Why is this WordPress comments form not submitting? 1
smooth movement using SHIFT and ARROW keys 4
Navigate table rows using arrow keys 5
Help with my responsive home page 2
Working on mobile css menu with plenty of frustration! 2
I Need Help with making a function that draws in a canvas using location data. 1

Members online

Total: 22 (members: 2, guests: 20)
Robots: 381

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top