回答編集履歴

2

typo

2018/12/03 07:37

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -58,8 +58,6 @@
58
58
 
59
59
  <input class="abc" type="checkbox">
60
60
 
61
- <br><br><br>
62
-
63
61
  </div>
64
62
 
65
63
  <div>
@@ -67,8 +65,6 @@
67
65
  2
68
66
 
69
67
  <input class="abc" type="checkbox">
70
-
71
- <br><br><br>
72
68
 
73
69
  </div>
74
70
 
@@ -78,8 +74,6 @@
78
74
 
79
75
  <input class="abc" type="checkbox">
80
76
 
81
- <br><br><br>
82
-
83
77
  </div>
84
78
 
85
79
  <div>
@@ -87,8 +81,6 @@
87
81
  4
88
82
 
89
83
  <input class="abc" type="checkbox">
90
-
91
- <br><br><br>
92
84
 
93
85
  </div>
94
86
 
@@ -98,8 +90,6 @@
98
90
 
99
91
  <input class="abc" type="checkbox">
100
92
 
101
- <br><br><br>
102
-
103
93
  </div>
104
94
 
105
95
  <div>
@@ -108,12 +98,10 @@
108
98
 
109
99
  <input class="abc" type="checkbox">
110
100
 
111
- <br><br><br>
112
-
113
101
  </div>
114
102
 
115
103
  </div>
116
104
 
117
- a
105
+
118
106
 
119
107
  ```

1

調整

2018/12/03 07:37

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -1 +1,119 @@
1
1
  各チェックボックスにtabindex属性をつければよいのでは?
2
+
3
+
4
+
5
+ # 調整
6
+
7
+
8
+
9
+ ```javascript
10
+
11
+ <style>
12
+
13
+ #wrap div{height:999px;}
14
+
15
+ #wrap div:nth-child(2n){background-Color:lime;}
16
+
17
+ #wrap div:nth-child(2n+1){background-Color:yellow;}
18
+
19
+ </style>
20
+
21
+
22
+
23
+ <script>
24
+
25
+ $(function(){
26
+
27
+ $(document).on('keyup',function(e){
28
+
29
+ if($(e.target).filter("body,.abc").length>0){
30
+
31
+ var idx=$('.abc').index($('.abc:focus'));
32
+
33
+ if(idx<0) idx=0;
34
+
35
+ var key=String.fromCharCode(e.keyCode).toLowerCase();
36
+
37
+ if(key=="b" && idx < $('.abc').length-1) idx++;
38
+
39
+ if(key=="a" && idx > 0) idx--;
40
+
41
+ $('html,body').animate({scrollTop:$('.abc').eq(idx).offset().top},0);
42
+
43
+ $('.abc').eq(idx).trigger('focus');
44
+
45
+ }
46
+
47
+ });
48
+
49
+ });
50
+
51
+ </script>
52
+
53
+
54
+
55
+ <div id="wrap">
56
+
57
+ <div>1
58
+
59
+ <input class="abc" type="checkbox">
60
+
61
+ <br><br><br>
62
+
63
+ </div>
64
+
65
+ <div>
66
+
67
+ 2
68
+
69
+ <input class="abc" type="checkbox">
70
+
71
+ <br><br><br>
72
+
73
+ </div>
74
+
75
+ <div>
76
+
77
+ 3
78
+
79
+ <input class="abc" type="checkbox">
80
+
81
+ <br><br><br>
82
+
83
+ </div>
84
+
85
+ <div>
86
+
87
+ 4
88
+
89
+ <input class="abc" type="checkbox">
90
+
91
+ <br><br><br>
92
+
93
+ </div>
94
+
95
+ <div>
96
+
97
+ 5
98
+
99
+ <input class="abc" type="checkbox">
100
+
101
+ <br><br><br>
102
+
103
+ </div>
104
+
105
+ <div>
106
+
107
+ 6
108
+
109
+ <input class="abc" type="checkbox">
110
+
111
+ <br><br><br>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ a
118
+
119
+ ```