Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 Help me to create a simple html, With keyboard navigation

views
     
TSSkylinestar
post May 15 2022, 09:58 AM, updated 2y ago

Mega Duck
********
All Stars
10,092 posts

Joined: Jan 2003
From: Sarawak
I just need a simple html webpage but I don't know the code for such (especially the keyboard navigation part). This is what I want:

Open up the html file and I will see:

1. Google (hyperlink to www.google.com)
2. Bing (hyperlink to www.bing.com)
3. Yahoo (hyperlink to www.yahoo.com)

I can navigate it with keyboard. That means I can press ↑ ↓ on my keyboard to choose one of them and press [Enter] key to visit any of the website. This is the actual part which I don't know how to do.

Thanks in advance.

This post has been edited by Skylinestar: May 15 2022, 09:59 AM
FlierMate
post May 21 2022, 09:38 PM

On my way
****
Validating
543 posts

Joined: Nov 2020
user posted image

It is very easy, the key is to navigate the link using Tab.


Attached File(s)
Attached File  index.zip ( 263bytes ) Number of downloads: 2
TSSkylinestar
post May 21 2022, 09:48 PM

Mega Duck
********
All Stars
10,092 posts

Joined: Jan 2003
From: Sarawak
QUOTE(FlierMate @ May 21 2022, 09:38 PM)
user posted image

It is very easy, the key is to navigate the link using Tab.
*
I want to use directional keys, not tab.
khanming
post May 25 2022, 10:50 PM

Getting Started
**
Validating
67 posts

Joined: Nov 2017
QUOTE(Skylinestar @ May 21 2022, 09:48 PM)
I want to use directional keys, not tab.
*
Hi, try this. But "event.which" does not support arrow key keycode, you use Numpad Up(8) and Down(2) arrow key to scroll......

Please let me know what you think. biggrin.gif

This post has been edited by khanming: May 25 2022, 10:57 PM


Attached File(s)
Attached File  index_v0.03.zip ( 458bytes ) Number of downloads: 0
khanming
post May 25 2022, 10:52 PM

Getting Started
**
Validating
67 posts

Joined: Nov 2017
Since I can't paste the code in Lowyat.Net (it block me), I capture the screen shot instead.

user posted image

This post has been edited by khanming: May 25 2022, 10:58 PM
khanming
post May 25 2022, 11:02 PM

Getting Started
**
Validating
67 posts

Joined: Nov 2017
QUOTE(Skylinestar @ May 21 2022, 09:48 PM)
I want to use directional keys, not tab.
*
I fixed it after referring to StackOverflow.

Have to use "onkeydown" not "onkeypress" to detect arrow key.

Done! cool2.gif


Attached File(s)
Attached File  index_v0.04.zip ( 458bytes ) Number of downloads: 2
TSSkylinestar
post May 25 2022, 11:28 PM

Mega Duck
********
All Stars
10,092 posts

Joined: Jan 2003
From: Sarawak
QUOTE(khanming @ May 25 2022, 10:52 PM)
Since I can't paste the code in Lowyat.Net (it block me), I capture the screen shot instead.

user posted image
*
that's why we have pastebin icon_rolleyes.gif

QUOTE(khanming @ May 25 2022, 11:02 PM)
I fixed it after referring to StackOverflow.

Have to use "onkeydown" not "onkeypress" to detect arrow key.

Done!  cool2.gif
*
that's a lot notworthy.gif

This post has been edited by Skylinestar: May 25 2022, 11:30 PM

 

Change to:
| Lo-Fi Version
0.0122sec    0.35    6 queries    GZIP Disabled
Time is now: 29th March 2024 - 04:39 PM