指定範囲内にタブ移動の範囲を制限するjQuery拡張

指定範囲内にタブ移動の範囲を制限するjQuery拡張

カスタムダイアログの範囲にフォーカスを制御したいときとかに

よくあるダイアログ範囲外にタブフォーカスが回りこんじゃう奴の防止。
jQuery.ui.dialogの手法がいいなーって思ったのでそこだけ使えるようにしてみた。
セレクタの範囲を広げれば自由に制御可能。
でも最初と最後をつないでいるだけなので、範囲内での遷移順位はDOM生成順番に依存するはず。

(function($) {
    $.fn.tabChain = function(option) {
        option = $.extend({},{onReadyFocus:false},option);

        var chains = [];

        var init = function(){
            var first = chains[0];
            var last = chains[chains.length-1];

            for(el in chains){
                $(chains[el]).keydown(function(event){
                    if (event.keyCode !== 9) {
                        return;
                    }
                    if (event.target === last && !event.shiftKey) {
                        first.focus(1);
                        return false;
                    }
                    else if (event.target === first && event.shiftKey) {
                        last.focus(1);
                        return false;
                    }
                })
            }
            if(option.onReadyFocus == true){
                first.focus();
            }

        }

        this.each(function(){
            chains.push(this);
        })

        init();
    };
})(jQuery);

使い方

範囲をjQueryセレクタで指定してください。
異なる要素や子要素纏めてとか1発でとってこられるjQueryセレクタはほんと優秀ですね！(´∀｀*)

(function($){
    $('input:text').tabChain({onReadyFocus:true});
})(jQuery);

オプションについて

• onReadyFocus　trueを指定するとこの拡張が有効になったタイミングで、指定した範囲内の先頭に当たる項目に自動フォーカスします。