jqueryで【繰り返し同じタグ～同じタグ～間】をキーボードで移動するものを作成しました。divタグ～divタグ間などはうまく動作しますがinputタグ間などはうまくいきません。どうしてでしょうか？

Question

繰り返し同じタグ～同じタグ～間ということで、分かりにくい見出しですので以下をそのままご覧になって頂きたいと思います。
キーボードのbでタグからタグに画面表示がダウンして、aでアップして行き来できるという、
こういうページを作成したいと思っていました。以下は動作がうまくいく、divタグ同士のものです。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js"></script>


<script>
var pos = 0;

Mousetrap.bind('a', function(){
  if(pos==0) return;
  pos -= 1;
  var hoge = $('div.cde').eq(pos).focus();
  var rec = hoge.offset();
  y = rec.top - window.pageYOffset;
  console.log(rec)
  window.scrollTo(0,rec.top);
});
Mousetrap.bind('b', function(){
  var size = $('div.cde').size();
  if(pos==size) return;
  pos += 1;
  var hoge = $('div.cde').eq(pos).focus();
  var rec = hoge.offset();
  y = rec.top + window.pageYOffset;
  console.log(rec)
  window.scrollTo(0,rec.top);
});

$(document).ready( function(){
  $('div.cde').eq(pos).focus();
});

</script>

1
<div class="cde"></div>
<br><br><br>

2
<div class="cde"></div>
<br><br><br>

3
<div class="cde"></div>
<br><br><br>

4
<div class="cde"></div>
<br><br><br>

5
<div class="cde"></div>
<br><br><br>

divタグのcdeクラスをキーボードのbでダウン、aでアップしません。
本題でございますが、
これの応用で、チェックボックス間を移動してチェックボックスにフォーカスを当てて、
スペースキーでチェックをいれたり、外したりできるものの作成を目指していました。

しかし以下のようなinputタグで出来たものを作成しても一つ位しかタグ～タグ間を移動せず
全体を上下に行き来することはできません。どういった原因が考えられますでしょうか。

<script>
var pos = 0;

Mousetrap.bind('a', function(){
  if(pos==0) return;
  pos -= 1;
  var hoge = $('input.abc').eq(pos).focus();
  var rec = hoge.offset();
  y = rec.top - window.pageYOffset;
  console.log(rec)
  window.scrollTo(0,rec.top);
});
Mousetrap.bind('b', function(){
  var size = $('input.abc').size();
  if(pos==size) return;
  pos += 1;
  var hoge = $('input.abc').eq(pos).focus();
  var rec = hoge.offset();
  y = rec.top + window.pageYOffset;
  console.log(rec)
  window.scrollTo(0,rec.top);
});

$(document).ready( function(){
  $('input.abc').eq(pos).focus();
});

</script>

1
<input class="abc" type="checkbox">
<br><br><br>

2
<input class="abc" type="checkbox">
<br><br><br>

3
<input class="abc" type="checkbox">
<br><br><br>

4
<input class="abc" type="checkbox">
<br><br><br>

5
<input class="abc" type="checkbox">
<br><br><br>

6
<input class="abc" type="checkbox">
<br><br><br>

チェックボックスにフォーカスはあてて動かしたいのですが
いかがすればよろしいでしょうか・・

Answer 1

各チェックボックスにtabindex属性をつければよいのでは？

調整

<style>
#wrap div{height:999px;}
#wrap div:nth-child(2n){background-Color:lime;}
#wrap div:nth-child(2n+1){background-Color:yellow;}
</style>

<script>
$(function(){
  $(document).on('keyup',function(e){
    if($(e.target).filter("body,.abc").length>0){
      var idx=$('.abc').index($('.abc:focus'));
      if(idx<0) idx=0;
      var key=String.fromCharCode(e.keyCode).toLowerCase();
      if(key=="b" && idx < $('.abc').length-1) idx++;
      if(key=="a" && idx > 0) idx--;
      $('html,body').animate({scrollTop:$('.abc').eq(idx).offset().top},0);
      $('.abc').eq(idx).trigger('focus');
    }
  });
});
</script>

<div id="wrap">
<div>1
<input class="abc" type="checkbox">
</div>
<div>
2
<input class="abc" type="checkbox">
</div>
<div>
3
<input class="abc" type="checkbox">
</div>
<div>
4
<input class="abc" type="checkbox">
</div>
<div>
5
<input class="abc" type="checkbox">
</div>
<div>
6
<input class="abc" type="checkbox">
</div>
</div>

Comments

[gugupoo]

tabindexをつけて一つだけ移動しましたがそこでやはりストップしてしまいました。
上記のdivタグのような移動はしてくれませんでした…。

[yambejp]

ごめんなさい。全体的に何をやりたいのかイマイチ伝わってこないんですが
チェックボックスのfocusをtab or shift+tabで移動するのではなく
aとbで移動するという仕様でしょうか？

[gugupoo]

そうです。

ただ細かく言いますとキーボードはaでなくてもbでなくても、
Mousetrap.bind('a', 　　の部分で他キーボードでも指定できるのでそこは問題ではありません。
cでもdでもキーは自由に好きなものに変更できます。

yambejp様のおっしゃられた通常のtabindexでの移動をすると画面の表示は高さがずれるといいますか
表示上見にくくなります。

ソースを実行していただければわかりますがタグごとの表示を見やすくしています。

[yambejp]

並行して
$('.abc').on('keyup',function(e){
console.log(String.fromCharCode(e.keyCode));
});

で、"B"を拾ってきたら同等の処理が入るようにするとかでしょうかね

[yambejp]

サンプルあげときました

[gugupoo]

yambejp様
正に指定キーボードより上下へ動き、チェックボックスが正にフォーカスで
spaceキーでチェックボックスのON,OFFもできて、
凄すぎて本当に素晴らしいと感動してしまいました。

ソースの再検証も徹底致します。
自分も自分でこれほどのプログラムを組めたら・・・
本当に有難うございました！