繰り返し同じタグ~同じタグ~間ということで、分かりにくい見出しですので以下をそのままご覧になって頂きたいと思います。
キーボードのbでタグからタグに画面表示がダウンして、aでアップして行き来できるという、
こういうページを作成したいと思っていました。以下は動作がうまくいく、divタグ同士のものです。
javascript
1<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.2/mousetrap.min.js"></script> 3 4 5<script> 6var pos = 0; 7 8Mousetrap.bind('a', function(){ 9 if(pos==0) return; 10 pos -= 1; 11 var hoge = $('div.cde').eq(pos).focus(); 12 var rec = hoge.offset(); 13 y = rec.top - window.pageYOffset; 14 console.log(rec) 15 window.scrollTo(0,rec.top); 16}); 17Mousetrap.bind('b', function(){ 18 var size = $('div.cde').size(); 19 if(pos==size) return; 20 pos += 1; 21 var hoge = $('div.cde').eq(pos).focus(); 22 var rec = hoge.offset(); 23 y = rec.top + window.pageYOffset; 24 console.log(rec) 25 window.scrollTo(0,rec.top); 26}); 27 28$(document).ready( function(){ 29 $('div.cde').eq(pos).focus(); 30}); 31 32</script> 33
html
11 2<div class="cde"></div> 3<br><br><br> 4 52 6<div class="cde"></div> 7<br><br><br> 8 93 10<div class="cde"></div> 11<br><br><br> 12 134 14<div class="cde"></div> 15<br><br><br> 16 175 18<div class="cde"></div> 19<br><br><br> 20
divタグのcdeクラスをキーボードのbでダウン、aでアップしません。
本題でございますが、
これの応用で、チェックボックス間を移動してチェックボックスにフォーカスを当てて、
スペースキーでチェックをいれたり、外したりできるものの作成を目指していました。
しかし以下のようなinputタグで出来たものを作成しても一つ位しかタグ~タグ間を移動せず
全体を上下に行き来することはできません。どういった原因が考えられますでしょうか。
javascript
1<script> 2var pos = 0; 3 4Mousetrap.bind('a', function(){ 5 if(pos==0) return; 6 pos -= 1; 7 var hoge = $('input.abc').eq(pos).focus(); 8 var rec = hoge.offset(); 9 y = rec.top - window.pageYOffset; 10 console.log(rec) 11 window.scrollTo(0,rec.top); 12}); 13Mousetrap.bind('b', function(){ 14 var size = $('input.abc').size(); 15 if(pos==size) return; 16 pos += 1; 17 var hoge = $('input.abc').eq(pos).focus(); 18 var rec = hoge.offset(); 19 y = rec.top + window.pageYOffset; 20 console.log(rec) 21 window.scrollTo(0,rec.top); 22}); 23 24$(document).ready( function(){ 25 $('input.abc').eq(pos).focus(); 26}); 27 28</script>
html
11 2<input class="abc" type="checkbox"> 3<br><br><br> 4 52 6<input class="abc" type="checkbox"> 7<br><br><br> 8 93 10<input class="abc" type="checkbox"> 11<br><br><br> 12 134 14<input class="abc" type="checkbox"> 15<br><br><br> 16 175 18<input class="abc" type="checkbox"> 19<br><br><br> 20 216 22<input class="abc" type="checkbox"> 23<br><br><br>
チェックボックスにフォーカスはあてて動かしたいのですが
いかがすればよろしいでしょうか・・
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/03 05:09
2018/12/03 05:20
2018/12/03 05:32
2018/12/03 06:21
2018/12/03 07:37
2018/12/03 09:20