Prevent default event for jQuery keydown in Firefox

Question

I have jQuery code which makes an array of focusable elements and binds .keydown for the left and right arrows to tab through them. In Chrome, IE, and Safari beginning with preventDefault() or ending with a return false (which technically I don't want to use because I have no need to stopPropagation()) prevents the default event of the arrows, but in Firefox it does not.

How can I prevent the default action in Firefox as well?

Here is the code, which works as expected, except in Firefox where the default event fires in addition to my callback.

$(function () {
    var focusables = $(":focusable");
    focusables.eq(0).focus();
    focusables.eq(0).select();
    focusables.each(function () {
        $(this).keydown(function (e) {
            if (e.which == '37') { // left-arrow
                e.preventDefault();
                var current = focusables.index(this),
                    next = focusables.eq(current - 1).length ? focusables.eq(current - 1) : focusables.eq(0);
                next.focus();
                next.select();
            }
            if (e.which == '39') { // right-arrow
                e.preventDefault();
                var current = focusables.index(this),
                    next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
                next.focus();
                next.select();
            }
        });
    });
});

Solution 1

The keypress event is the one which would need to be canceled, but Firefox ignores preventDefault() in this scenario. So the solution is to blur the current dropdown, let the keypress event fire on the document and set the focus to the new dropdown via timeout.

var focusables = $(":focusable");
focusables.eq(0).focus().select();
focusables.each(function () {
    $(this).keydown(function (e) {
        if (e.which == '37') { // left-arrow
            e.preventDefault();
            var current = focusables.index(this),
                next = focusables.eq(current - 1).length ? focusables.eq(current - 1) : focusables.eq(0);
            this.blur();
            setTimeout(function() { next.focus().select(); }, 50);
        }
        if (e.which == '39') { // right-arrow
            e.preventDefault();
            var current = focusables.index(this),
                next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
            this.blur();
            setTimeout(function() { next.focus().select(); }, 50);
        }
    });
});

Demo at http://jsfiddle.net/roberkules/3vA53/

Solution 2

Have you tried this?

$(selector).click(function(event) {
   event.preventDefault();
});

Comments

[Brandon]

This is not working for me. Perhaps the reason that this is working for your code is because you are using input text boxes, where as I am primarily navigating drop-down boxes. When I navigate to the next drop-down box, the value of the newly focused-on list changes to the next value.

[talltolerablehuman]

I see, once jsfiddle is back online I'll have a look.

[talltolerablehuman]

You're welcome. Unfortunately I can't see a real solution, just this workaround.

[Rudey]

@Brandon see this for Firefox support.