Disable tabbing on whole div

Question

I have a quiz with multiple questions.. only one is shown at a time. But if user tabs on the page the quiz will be apart of the tabbing order.

Setting tabindex="-1" dont work in all browsers.. is there some other way? jQuery? I need it to skip the whole div somehow...

Note: I tried this:

$('.quiz').live('keydown', function(e) {
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) { 
        e.preventDefault();
    }
});

But it didnt work.. :/

Neither did this:

$('.quiz').bind('focusin', function() {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) { 
        e.preventDefault();
        return false;
    }  
});

Answer 1

Have a look at this: http://jsfiddle.net/albertjan/5X5LH/12/

js

$(window).keydown(function(e) {
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) { 
        if ($(e.target).is('.quiz *')) {
            e.preventDefault();
        } else {
            wastab = true;
        }
    }
});

$('.quiz input').focus(function(){
    if (wastab){
        wastab = false;    
        $('#not-in-quiz').focus();
    }
});

​