こんにちわ~
犬好きの@wannkoromaru|@wankoromaru_kunです。
最近うちのチワプ-(9ヶ月齢)は、ゴムボールのダイレクトキャッチに夢中です。
......
さて・・・
HTMLのtabindexってありますよね。
<input type="text" name="hoge" value="" tabindex="123">
・・・みたいなやつです。
画面上にいろいろtabindexを割り付けたinput type="text"があるわけですが、処理の都合で、あるtextボックスからfocusOutしたとき、特定のtabindexにfocus移動したくなっちゃったわけです。(・・・ホントはそんなややこしいことしたくなかった(/_・)/)
・・で、やり方をググったのですが、わかるまでちょっと時間がかかった(同類の記事がそれほど多くないような気がした)のでメモめもです。
....
下記のサンプルは、EnterキーでTABキーの動作が出来るようにもしろ!と言われたした時のcodeをとってきたものです。・・ご勘弁を~
$(document).on('keypress', 'input[type="text"]', function(ev) {
var $me = $(this);
var $list = $('input[type="text"]:enabled');
if (ev.keyCode == 13) {
var metabindex = $me[0].tabIndex;
$list.each(function(index){
if ($(this).is($me)) {
var targetIndex = (!event.shiftKey) ? (metabindex + 1) : (metabindex - 1);
$('[tabindex='+targetIndex+']').focus();
ev.preventDefault();
}
});
}
});
Enterが押されたとき、
var metabindex = $me[0].tabIndex;
で、フォーカスの抜ける前のtabindexを取得できました。(ieの開発者ツールF12で確認しました)
var targetIndex = (!event.shiftKey) ? (metabindex + 1) : (metabindex - 1);
のところで、次に移動するtabindexを計算しています。
この例は、単にShiftを押しながらで無ければ現在のtabindexの値にプラス1を・・Shiftを押しながらであれば、マイナス1を・・しているだけです。
そして、その計算したtabindexにfocusを移動するとき、
$('[tabindex='+targetIndex+']').focus();
・・・を実行します。
要は・・・・
$('[tabindex=999]').focus();
とすれば、tabindexが999の所にfocusがうつるというところでしょうか?
後記;
書き終えれば、たいした話ではないのかな (?_?>
でも、どこかでお役に立てればうれしいです。