Question

Im using the most recent moo release and trying to write a function that evaluates the user given expression on event “keyup”. As soon as my test’s are passing I put the focus on the next input element automatically to improve the user experience and speed, since he uses the form many times.

So I came up with something like that:

var getNextInputElement = function(element){
    returns the next input element
}

var checkDay = function(event){
    var input = $('booking_day').get('value');
    if (input.length > 1 && input < 32) {
        $('booking_day').erase('class');
        if (!(event.key == "tab")) {
            getNextInputElement($('booking_day')).focus();
        }
        else {
            $('booking_day').focus();
        }
    }
    else if(input.length > 1) {
        $('booking_day').set('class','error');
    }
    else {
        $('booking_day').erase('class');
    }
};

window.addEvent('domready', function() {
    $('new_booking').reset();
    $('booking_day').addEvent('keyup', checkDay);
    $('booking_day').focus();
});

Works fine so far. But if I try to “shift-tab” back to my input field

getNextInputElement($('booking_day')).focus();

is evaluated and focus reset to the next input field. So the user cannot roll back to previosly entered data. I do not find any possibility to catch that shift-tab event. Since two keys are pressed, there are two events fired. One for “tab” and a second one, but not for “shift”. The event.key.code of this event seems to be outside the scope that mootools realizes.

Anyone out there who can help on this problem?

Thanks.
Jason

Answer 1

You can add event for both “Shift+Tab” keys

Link : http://mootools.net/docs/more/Interface/Keyboard