CODEWITHSUNDEEP
javascripthtmlcss
Casper F
Casper F

Reputation: 161

Easy and correct way of navigation using keyboard on website?

What is the easiest and cross-browser correct way of adding the option to navigate a web page using keyboard input? Designing a really wide and long page right now and would like to offer users the option to scroll across using only the keyboard too.

There might be sections with divs wrapped in tags on it and ideally I want the transition to be smooth from one div to the other when pressing "left" "right" "up" or "down" keys.

Thank you!

Upvotes: 3

Views: 1909

Answers (1)

vinczemarton
vinczemarton

Reputation: 8166

First, in a browser there is default behaviour for the arrow keys. They scroll across the page if it's longer or wider than your page.

If your page is scrollable you shouldn't really override the arrow keys, they already work.

There are cases though where you might want to bind events to specific keys. But I suggest you use WASD instead of arrow keys.

I'll try to do this in plain JavaScript as I don't want to force you to be using any framework, but I'll provide a jQuery alternative too.

First, there are quite a few ways browsers seem to register keypresses. I'm looking at quirksmode.org which is an exceptional information source on how browsers handle non-standard or even standard things. I go there quite often for figuring out "best practices".

It tells me that the best (most widely supported) event I can use is keydown. Also that the most reliable way to read the pressed key from the event is reading the event.keyCode. According to MDN, this is deprecated, and you should use key (which is marked as not implemented), but at least event.keyCode works consistently across browsers. So you can handle keypresses like this:

document.onkeydown = function(e) {
    var evt = e || window.event; // for more compatibility
    var keyCode = evt.keyCode;

    console.log(keyCode + " was pressed");

    switch(keyCode) {
        case 37: // left key was pressed
            handleLeft();
            e.preventDefault(); // prevents the default behaviour to trigger
            break;
        case 38: // up key was pressed
            handleUp();
            e.preventDefault();
            break;
        case 39: // right key was pressed
            handleRight();
            e.preventDefault();
            break;
        case 40: // down key was pressed
            handleDown();
            e.preventDefault();
            break;
        default:
            // there are quite a few keycodes left :)
            break;
    }
}

keyCode is an unsigned integer, the encodinc is either ASCII or Windows-1252, but that's the same for normal keys. If you are not sure, then alert() or console.log() the pressed key, so you can check it's code.

If you are using jQuery the event.which property is normalized on the keydown event, so you can use it like:

$('document').keydown(function(event) {
    if (event.which == 37) {
         alert('left key was pressed');
    }
});

Now on how to handle the navigation. If I understand you correctly, you want to scroll the window.

window.scroll is not part of a standard, but is supported everywhere. Also window.scollBy and window.scrollByPages helps you to scroll a relative amount.

So for example you could write the handleLeft() function from the code before like this:

function handleLeft() {
    window.scrollBy(-1 * window.innerWidth, 0);
}

This scrolls one page to the left.

I'm confident that you will be able to build your code form this.

Upvotes: 1

Related Questions