A guide on using key arrows in JavaScript to navigate and focus on elements

Question

A guide on using key arrows in JavaScript to navigate and focus on elements

When working on my HTML project, I have a list of elements that I want to be able to select using the arrow keys.

I've included my code here for reference: [http://jsfiddle.net/T8S7c/]

What I'm trying to achieve is when the arrow keys are pressed, the focus should move to the selected element as if it had a hover effect. (For instance, pressing the down key should move the focus to Ambaji on the first key press)

I have the key event code figured out, but I'm struggling with how to shift the focus on keypress.

If anyone has any suggestions or solutions, I would greatly appreciate the help!

javascript html css

Answer 1

Answer №1

My approach to tackling this issue involves establishing a specific sequence of links and utilizing a variable to indicate which link should be the focus.

let order = ["link1", "link2", "link3", "link4"];
let currentFocus = -1;

function updateCurrent(inc) {
    currentFocus = (currentFocus + inc) % order.length;
    currentFocus = Math.max(currentFocus, 0);
}

document.onkeydown = function(evt) {
    evt = evt || window.event;

    switch (evt.keyCode) {
        case 38:
            updateCurrent(-1);
            document.getElementById(order[currentFocus]).focus();
            break;
        case 40:
            updateCurrent(1);
            document.getElementById(order[currentFocus]).focus();
            break;
    }
};

Answer 2

My approach to tackling this issue involves establishing a specific sequence of links and utilizing a variable to indicate which link should be the focus.

let order = ["link1", "link2", "link3", "link4"];
let currentFocus = -1;

function updateCurrent(inc) {
    currentFocus = (currentFocus + inc) % order.length;
    currentFocus = Math.max(currentFocus, 0);
}

document.onkeydown = function(evt) {
    evt = evt || window.event;

    switch (evt.keyCode) {
        case 38:
            updateCurrent(-1);
            document.getElementById(order[currentFocus]).focus();
            break;
        case 40:
            updateCurrent(1);
            document.getElementById(order[currentFocus]).focus();
            break;
    }
};

Answer 3

Answer №2

Check out the revised version of your code below. You can also view it on this Fiddle: http://jsfiddle.net/K4J3p/9/

const links = document.getElementsByTagName("a");
let currentIndex = 0;
links[currentIndex].focus();

document.onkeydown = function(evt) {
    evt = evt || window.event;

    switch (evt.keyCode) {
        case 38: // Up arrow
            if(currentIndex > 0){links[--currentIndex].focus();}
            break;
        case 40:// Down arrow
           if(currentIndex < links.length){links[++currentIndex].focus();}
            break;
    }
};

Answer 4

Check out the revised version of your code below. You can also view it on this Fiddle: http://jsfiddle.net/K4J3p/9/

const links = document.getElementsByTagName("a");
let currentIndex = 0;
links[currentIndex].focus();

document.onkeydown = function(evt) {
    evt = evt || window.event;

    switch (evt.keyCode) {
        case 38: // Up arrow
            if(currentIndex > 0){links[--currentIndex].focus();}
            break;
        case 40:// Down arrow
           if(currentIndex < links.length){links[++currentIndex].focus();}
            break;
    }
};

A guide on using key arrows in JavaScript to navigate and focus on elements

Answer №1

Answer №2

Similar questions

Altering the Size of Text in HTML

Is it necessary to convert SCSS into CSS in React?

How to retrieve the value from a JSON object when the key is unknown in JavaScript

How can the value attribute be obtained from the click class?

Troubleshooting steps for resolving Heroku's "State changed from up to crashed" error caused by Mongoose connection issue

How to handle Component binding change events in AngularJS

Challenge with adjusting opacity of background when hovering over a box

Continue looping in Javascript until an empty array is identified

Should the updater method be placed in the state or passed directly to the context?

Electron / Atom Shell unable to locate specified module

strange occurrences of bootstrap.min.css.map popping up

What is the best way to add HTML formatted text into Outlook?

Implement a fullscreen hero image on a specific blogroll template page in Wordpress

Using Jquery to store input values from within <td> elements in an array

Is there a way to reach a different function within the value of the react Context.Provider?

Configuring route for serving static files in an Express server

Best Practices for Handling Form State in ReactJS with Redux

JavaScript for creating dropdown menus using Twitter Bootstrap

What causes the button's frame color to change when I click on it?

Using Q to conduct polling asynchronously with promises