html tabキーによるfocusのtabindexの取得 jquery

Question

html

<ul>
<li><a href="a.html" tabindex="0">a</a></li>
<li><a href="b.html" tabindex="1">b</a></li>
<li><a href="c.html" tabindex="2">c</a></li>
</ul>

上記のhtmlでtabキーを押すとちゃんと順番に0,1,2と移動して該当箇所でEnterを押すと指定のhtmlへ遷移します。
ここまでは期待通りの動きなのですが、

jqueryにてtabindex=1のときに、特定の処理をしたいのですが、なぜかtabindexの値が一個前にfocusしたindexが取れてしまいます。

		$(window).keydown(function(e){
			if(e.keyCode == 9) {
				var focused = $(':focus').attr("tabindex");
				console.log("focused",focused);//ここがliの二番目にいるのにtabindex="0"と出力される・・・liの3番目にいるときにshift+tabで二番目に戻った際はtabindex="2"と表示されます。

				if(focused == 1) {
　　　　　　　　　　　　　　　　　　console.log("やりたい処理");
				} 
			}
			
		});

tabキーで移動した先のtabindex番号をすぐに取得するにはどう修正すればよいでしょうか？

Answer 1

focusが移るのがkeydown等のイベントが全て終わってからなのではないでしょうか。
対象の要素のfocusイベントを使うか、イベント終了を待つかどちらかを試してみてください。

【.focus() | jQuery API Documentation】
https://api.jquery.com/focus/

【【js】firefoxでfocusイベントが動かない - Qiita】
https://qiita.com/mk-tool/items/4db8c91603b7c165d909

Comments

[cheche0830]

すいません!ありがとうございました!!!

Answer 2

keydownしてからfocusするからじゃないでしょうか？

$(function(){
  $('[tabindex]').on('focus',function(e){
    var focused = $(':focus').attr("tabindex");
    console.log("focused",focused);
    if(focused == 1) {
      console.log("やりたい処理");
    } 
  });
});

tabキーを押すとちゃんと順番に0,1,2と移動して

たぶんそうはなってないはずです
1,2,0で処理されますよね？
正の整数順で移動して最後は0
想定通り動かしたいなら1から始まるtabIndexを設定してください

Comments

[cheche0830]

おおお！できました！！なるほど！！！
納得です。そしてtabindexも0が一番だと思ってました。。ありがとうございました！