質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.69%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 303

gugupoo

score 20

繰り返し同じタグ~同じタグ~間ということで、分かりにくい見出しですので以下をそのままご覧になって頂きたいと思います。
キーボードの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>

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

各チェックボックスに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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/03 15:21

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

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

    キャンセル

  • 2018/12/03 16:37

    サンプルあげときました

    キャンセル

  • 2018/12/03 18:20

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.69%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • jqueryで【繰り返し同じタグ~同じタグ~間】をキーボードで移動するものを作成しました。divタグ~divタグ間などはうまく動作しますがinputタグ間などはうまくいきません。どうしてでしょうか?