teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

hidden対応

2017/08/23 03:27

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -32,17 +32,22 @@
32
32
  # 追記
33
33
  ご指定の内容で特に問題ないようですよ
34
34
  ご利用の環境ではなにかライブラリでキーイベントに機能が付加されているのかもしれません
35
+ email、hiddenに対応しました
35
36
 
36
37
  ```javascript
37
38
  <script>
38
39
  document.addEventListener('keydown',function(e){
39
40
  var t=e.target;
40
- if(t.nodeName=="INPUT" && (t.type=="text"||t.type=="radio") && e.keyCode==13){
41
+ if(t.nodeName=="INPUT" && (t.type=="text"||t.type=="radio"||t.type=="email") && e.keyCode==13){
41
42
  var f=t.form;
43
+ var k=0;
42
44
  for(var i=0;i<f.length;i++){
43
45
  if(f.elements[i]==t){
46
+ for(var j=1;j<=f.length;j++){
44
- if(e.shiftKey==false){f.elements[(i==f.length-1)?0:i+1].focus();}
47
+ var k=(i+j*(e.shiftKey?-1:1)+f.length)%f.length;
48
+ if(f.elements[k].type!="hidden") break;
49
+ }
45
- else{f.elements[(i==0)?f.length-1:i-1].focus();}
50
+ f.elements[k].focus();
46
51
  break;
47
52
  }
48
53
  }
@@ -58,8 +63,11 @@
58
63
  <input type="radio" name="yoken" value="その他">その他</td></tr>
59
64
  <tr><td>会社:</td><td><input type="text" name="kaisha"></td></tr>
60
65
  <tr><td>名前:</td><td><input type="text" name="namae" required>(必須)</td></tr>
61
- <tr><td>mail:</td><td><input type="text" name="mail" required>(必須)</td></tr>
66
+ <tr><td>mail:</td><td><input type="email" name="mail" required>(必須)</td></tr>
62
- <tr><td>電話:</td><td><input type="text" name="denwa"></td></tr>
67
+ <tr><td>電話:</td><td><input type="text" name="denwa">
68
+ <input type="hidden" name="hoge1" value="fuga">
69
+ <input type="hidden" name="hoge2" value="fuga">
70
+ <input type="hidden" name="hoge3" value="fuga"></td></tr>
63
71
  <tr><td>住所:</td><td><input type="text" name="jusho"></td></tr>
64
72
  <tr><td>内容:</td><td><input type="text" name="naiyo" required>(必須)</td></tr>
65
73
  </tbody>

1

追記

2017/08/23 03:27

投稿

yambejp
yambejp

スコア117912

answer CHANGED
@@ -27,4 +27,42 @@
27
27
  <input type="submit" value="go">
28
28
  </form>
29
29
 
30
+ ```
31
+
32
+ # 追記
33
+ ご指定の内容で特に問題ないようですよ
34
+ ご利用の環境ではなにかライブラリでキーイベントに機能が付加されているのかもしれません
35
+
36
+ ```javascript
37
+ <script>
38
+ document.addEventListener('keydown',function(e){
39
+ var t=e.target;
40
+ if(t.nodeName=="INPUT" && (t.type=="text"||t.type=="radio") && e.keyCode==13){
41
+ var f=t.form;
42
+ for(var i=0;i<f.length;i++){
43
+ if(f.elements[i]==t){
44
+ if(e.shiftKey==false){f.elements[(i==f.length-1)?0:i+1].focus();}
45
+ else{f.elements[(i==0)?f.length-1:i-1].focus();}
46
+ break;
47
+ }
48
+ }
49
+ e.preventDefault();
50
+ }
51
+ });
52
+ </script>
53
+ <form>
54
+ <table>
55
+ <tbody>
56
+ <tr><td>要件:</td><td><input type="radio" name="yoken" value="問い合わせ">問い合わせ
57
+ <input type="radio" name="yoken" value="サンプル">サンプル
58
+ <input type="radio" name="yoken" value="その他">その他</td></tr>
59
+ <tr><td>会社:</td><td><input type="text" name="kaisha"></td></tr>
60
+ <tr><td>名前:</td><td><input type="text" name="namae" required>(必須)</td></tr>
61
+ <tr><td>mail:</td><td><input type="text" name="mail" required>(必須)</td></tr>
62
+ <tr><td>電話:</td><td><input type="text" name="denwa"></td></tr>
63
+ <tr><td>住所:</td><td><input type="text" name="jusho"></td></tr>
64
+ <tr><td>内容:</td><td><input type="text" name="naiyo" required>(必須)</td></tr>
65
+ </tbody>
66
+ </table>
67
+
30
68
  ```