CODEWITHSUNDEEP
javascriptjquery
mikelbring
mikelbring

Reputation: 1492

Stop cursor movement when using up and down arrow

I have a live search input that shows results and lets you use the up and down arrows when the results popup but I want to prevent the cursor from moving left or right when using the up and down arrows. I cannot figure this out. I tried e.preventDefault() with no luck. Here is what I have tried:

    if(e.which == 40){

        e.preventDefault();

        current = results.find('li.hover');
        current.removeClass();
        var next = current.next('li');

        if(next.length == 0){
            next = current.parent().parent().parent().next().find('li:first');

            /* Go back to the top */
            if(next.length == 0){
                next = results.find('li:first');
            }
        }

        next.addClass('hover');
        return false;
    }

Thanks!

Upvotes: 6

Views: 5284

Answers (2)

spaced_uk
spaced_uk

Reputation: 3

You could do something like...

$('#content').on('keydown', function(event) {
    var key = event.originalEvent.key;
    if (key == 'ArrowDown' || key == 'ArrowUp') {
        event.preventDefault();
    }
});

$('#content').on('keyup', function(event) {
    // do stuff
});

Upvotes: 0

Niels
Niels

Reputation: 49909

Are you binding this onkeyup or keydown? If you are using keydown, you can prevent it, if your using keyup, the event already happened. Otherwise e.preventDefault() should be working.

Upvotes: 17

Related Questions