jQuery event.keyCode 0 when Swedish keys å, ä and ö are pressed

Question

Hi!

I have an html form with a lot of text fields that all take only one character (think crossword puzzle). When a letter is entered in an input field, I use jQuery to jump to the next one. This works fine, except for the Swedish characters åäö (other international characters are probably affected too).

I bind an event listener to the keyup event, and use the event.keyCode and event.which to determine if the pressed key was a letter (if it was any special key, the events passes untouched).

The problem is that when I press å, ä or ö, both event.keyCode and event.which are 0. When I examine the event object in Firebug, I can't find any attribute that seems to hold the key code.

The code looks like this:

    var crossword = $('article.crossword');

    crossword.bind('keyup', function(event) {
        var target = $(event.target, crossword);

        if (target.hasClass('crossword_letter_input')) {
            var pressedKey = event.which ? event.which : event.keyCode;
            var target_value = target.val();
            var target_tabindex;

            // Regular alphanumeric keys have keyCodes between 48 and 90.
            if (pressedKey >= 48 && pressedKey <= 90 && target_value.length) {
                target_tabindex = parseInt(target.attr('tabindex'));
                $('input.crossword_letter_input[tabindex=' + (target_tabindex + 1) + ']', crossword).focus();
            }
        }
    });

I use the keyup event in order to move focus after the character has been entered into the text field.

If you know of any jQuery plugin or vanilla JS that could replace this completely, that would also be a solution.

EDIT: I have made a temporary (and ugly) fix by inserting the following else if:

    // å, ä and ö reports keyCode 0 for some reason.
    else if (pressedKey === 0 && target_value.length) {
        target_tabindex = parseInt(target.attr('tabindex'));
        $('input.crossword_letter_input[tabindex=' + (target_tabindex + 1) + ']', crossword).focus();
    }

This way, I simply suppose that if the event.which and event.keyCode was both 0, and the length of the value in the field is greater than 0, focus should be moved to the next input. Supposing stuff without knowing doesn't feel great though...

Answer 1

jQuery automatically normalizes event.keyCode and event.which into event.which so you may be losing something by renormalizing on event.keyCode. Take a look at the example on jQuery's API documentation page for event.which, which will show what the key code is for characters entered.