回答編集履歴

2

hidden対応

2017/08/23 03:27

投稿

yambejp
yambejp

スコア114585

test CHANGED
@@ -66,6 +66,8 @@
66
66
 
67
67
  ご利用の環境ではなにかライブラリでキーイベントに機能が付加されているのかもしれません
68
68
 
69
+ email、hiddenに対応しました
70
+
69
71
 
70
72
 
71
73
  ```javascript
@@ -76,17 +78,25 @@
76
78
 
77
79
  var t=e.target;
78
80
 
79
- if(t.nodeName=="INPUT" && (t.type=="text"||t.type=="radio") && e.keyCode==13){
81
+ if(t.nodeName=="INPUT" && (t.type=="text"||t.type=="radio"||t.type=="email") && e.keyCode==13){
80
82
 
81
83
  var f=t.form;
84
+
85
+ var k=0;
82
86
 
83
87
  for(var i=0;i<f.length;i++){
84
88
 
85
89
  if(f.elements[i]==t){
86
90
 
87
- if(e.shiftKey==false){f.elements[(i==f.length-1)?0:i+1].focus();}
91
+ for(var j=1;j<=f.length;j++){
88
92
 
93
+ var k=(i+j*(e.shiftKey?-1:1)+f.length)%f.length;
94
+
95
+ if(f.elements[k].type!="hidden") break;
96
+
97
+ }
98
+
89
- else{f.elements[(i==0)?f.length-1:i-1].focus();}
99
+ f.elements[k].focus();
90
100
 
91
101
  break;
92
102
 
@@ -118,9 +128,15 @@
118
128
 
119
129
  <tr><td>名前:</td><td><input type="text" name="namae" required>(必須)</td></tr>
120
130
 
121
- <tr><td>mail:</td><td><input type="text" name="mail" required>(必須)</td></tr>
131
+ <tr><td>mail:</td><td><input type="email" name="mail" required>(必須)</td></tr>
122
132
 
123
- <tr><td>電話:</td><td><input type="text" name="denwa"></td></tr>
133
+ <tr><td>電話:</td><td><input type="text" name="denwa">
134
+
135
+ <input type="hidden" name="hoge1" value="fuga">
136
+
137
+ <input type="hidden" name="hoge2" value="fuga">
138
+
139
+ <input type="hidden" name="hoge3" value="fuga"></td></tr>
124
140
 
125
141
  <tr><td>住所:</td><td><input type="text" name="jusho"></td></tr>
126
142
 

1

追記

2017/08/23 03:27

投稿

yambejp
yambejp

スコア114585

test CHANGED
@@ -57,3 +57,79 @@
57
57
 
58
58
 
59
59
  ```
60
+
61
+
62
+
63
+ # 追記
64
+
65
+ ご指定の内容で特に問題ないようですよ
66
+
67
+ ご利用の環境ではなにかライブラリでキーイベントに機能が付加されているのかもしれません
68
+
69
+
70
+
71
+ ```javascript
72
+
73
+ <script>
74
+
75
+ document.addEventListener('keydown',function(e){
76
+
77
+ var t=e.target;
78
+
79
+ if(t.nodeName=="INPUT" && (t.type=="text"||t.type=="radio") && e.keyCode==13){
80
+
81
+ var f=t.form;
82
+
83
+ for(var i=0;i<f.length;i++){
84
+
85
+ if(f.elements[i]==t){
86
+
87
+ if(e.shiftKey==false){f.elements[(i==f.length-1)?0:i+1].focus();}
88
+
89
+ else{f.elements[(i==0)?f.length-1:i-1].focus();}
90
+
91
+ break;
92
+
93
+ }
94
+
95
+ }
96
+
97
+ e.preventDefault();
98
+
99
+ }
100
+
101
+ });
102
+
103
+ </script>
104
+
105
+ <form>
106
+
107
+ <table>
108
+
109
+ <tbody>
110
+
111
+ <tr><td>要件:</td><td><input type="radio" name="yoken" value="問い合わせ">問い合わせ
112
+
113
+ <input type="radio" name="yoken" value="サンプル">サンプル
114
+
115
+ <input type="radio" name="yoken" value="その他">その他</td></tr>
116
+
117
+ <tr><td>会社:</td><td><input type="text" name="kaisha"></td></tr>
118
+
119
+ <tr><td>名前:</td><td><input type="text" name="namae" required>(必須)</td></tr>
120
+
121
+ <tr><td>mail:</td><td><input type="text" name="mail" required>(必須)</td></tr>
122
+
123
+ <tr><td>電話:</td><td><input type="text" name="denwa"></td></tr>
124
+
125
+ <tr><td>住所:</td><td><input type="text" name="jusho"></td></tr>
126
+
127
+ <tr><td>内容:</td><td><input type="text" name="naiyo" required>(必須)</td></tr>
128
+
129
+ </tbody>
130
+
131
+ </table>
132
+
133
+
134
+
135
+ ```