JavaScript
jQuery

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

More than 5 years have passed since last update.


指定範囲内にタブ移動の範囲を制限する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を指定するとこの拡張が有効になったタイミングで、指定した範囲内の先頭に当たる項目に自動フォーカスします。