Question

I’m using jQuery to customize my own dropbox but was wondering how I could apply the tabindex to it.

I try to use the hidden select focus/blur event but doesn’t seem to work.

I also try to apply a tabindex attribute to my customize dropbox (a div) but without success.

Can someone have a sample or a link to show me how I can achieve this?

Thanks

Answer 1

I’m not sure that I fully understand what you’re going for, but perhaps this will get you started: http://jsfiddle.net/2rCFV/1/

$(window).keydown(function(e){
    if(e.which === 9){ //tab
        var selected = $('.selected');
        selected.removeClass('selected');

        var tabIndex = +selected.attr('tabIndex') + 1; //plus sign at beginnign converts it to a number

        var next = selected.siblings('[tabIndex=' + tabIndex + ']');

        if(next.length > 0){ //if this element exists
            next.addClass('selected');
        }else{
            selected.siblings('[tabIndex=' + 1 + ']').addClass('selected'); //select the first one
        }

        e.preventDefault();
    }
});