teratail
回答率
85.49%
質問するログイン新規登録
トップHTML5に関する質問input要素内でエンターを押したときにbutton要素のonClickと同じ処理を行いたい

編集履歴

回答編集履歴

5

修正

2016/10/01 13:10

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  <head>
10
10
 
11
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
11
+ <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
12
12
 
13
13
  </head>
14
14
 
@@ -33,38 +33,6 @@
33
33
 
34
34
 
35
35
  ```javascript
36
-
37
- // jQery　使用版
38
-
39
- $(function(){
40
-
41
- var input = $('form [name=inputName1]');
42
-
43
- var button = $('button [name=buttonName1]');
44
-
45
- input.on('keypress', function(e){
46
-
47
- if(e.keyCode === "undefined" || e.keyCode === 13){
48
-
49
- e.preventDefault();
50
-
51
- button.trigger('click');
52
-
53
- }
54
-
55
- return false;
56
-
57
- });
58
-
59
- button.on('click', function(){
60
-
61
- console.log(input.val());
62
-
63
- });
64
-
65
-
66
-
67
- })
68
36
 
69
37
 
70
38
 
@@ -120,7 +88,41 @@
120
88
 
121
89
 
122
90
 
91
+ // jQery　使用版
123
92
 
93
+ /*
94
+
95
+ $(function(){
96
+
97
+ var input = $('form [name=inputName1]');
98
+
99
+ var button = $('button [name=buttonName1]');
100
+
101
+ input.on('keypress', function(e){
102
+
103
+ if(e.keyCode === "undefined" || e.keyCode === 13){
104
+
105
+ e.preventDefault();
106
+
107
+ button.trigger('click');
108
+
109
+ }
110
+
111
+ return false;
112
+
113
+ });
114
+
115
+ button.on('click', function(){
116
+
117
+ console.log(input.val());
118
+
119
+ });
120
+
121
+
122
+
123
+ })
124
+
125
+ */
124
126
 
125
127
 
126
128
 

4

shuusei

2016/10/01 13:10

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
@@ -66,6 +66,64 @@
66
66
 
67
67
  })
68
68
 
69
+
70
+
71
+ 素の方
72
+
73
+ window.onload = function(){
74
+
75
+ var input = document.getElementByName('name');
76
+
77
+ var button = document.querySelectorAll('button [type="button"]');
78
+
79
+ input.onKeyPress = function(){
80
+
81
+ if(window.event.keyCode === "undefined" || window.event.keyCode === 13){
82
+
83
+ window.event.preventDefault();
84
+
85
+ triggerEvent(button, 'click');
86
+
87
+ }
88
+
89
+ window.event.preventDefault();
90
+
91
+ }
92
+
93
+ button.onclick = function(){
94
+
95
+ console.log(getElementsByName('name')[0].value);
96
+
97
+ }
98
+
99
+ }
100
+
101
+ function triggerEvent(element, event) {
102
+
103
+ if (document.createEvent) {
104
+
105
+ var evt = document.createEvent("HTMLEvents");
106
+
107
+ evt.initEvent(event, true, true );
108
+
109
+ return element.dispatchEvent(evt);
110
+
111
+ } else {
112
+
113
+ var evt = document.createEventObject();
114
+
115
+ return element.fireEvent("on"+event, evt)
116
+
117
+ }
118
+
119
+ }
120
+
121
+
122
+
123
+
124
+
125
+
126
+
69
127
  ```
70
128
 
71
129
 

3

修正

2016/10/01 13:08

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
@@ -1,52 +1,70 @@
1
1
  ---
2
2
 
3
3
  **解決策**
4
+
5
+ ```html
6
+
7
+ <html>
8
+
9
+ <head>
10
+
11
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
12
+
13
+ </head>
14
+
15
+ <body>
16
+
17
+ <h1>TEST</h1>
18
+
19
+ <form>
20
+
21
+ <input name="inputName1" type="text" size="100" style="width: 100px">
22
+
23
+ <button name="buttonName1" type="button">test</button>
24
+
25
+ </form>
26
+
27
+ </body>
28
+
29
+ </html>
30
+
31
+ ```
4
32
 
5
33
 
6
34
 
7
35
  ```javascript
8
36
 
9
- window.onload = function(){
37
+ // jQery　使用版
10
38
 
11
- var input = document.getElementByName('name');
39
+ $(function(){
12
40
 
13
- var button = document.querySelectorAll('button [type="button"]');
41
+ var input = $('form [name=inputName1]');
14
42
 
15
- input.onclick = function(){
43
+ var button = $('button [name=buttonName1]');
16
44
 
17
- input.preventDefault();
45
+ input.on('keypress', function(e){
18
46
 
19
- triggerEvent(button, 'click');
47
+ if(e.keyCode === "undefined" || e.keyCode === 13){
20
48
 
21
- }
49
+ e.preventDefault();
22
50
 
23
- button.onclick = function(){
51
+ button.trigger('click');
24
52
 
25
- console.log(getElementsByName('name')[0].value);
53
+ }
26
54
 
27
- }
55
+ return false;
28
56
 
29
- }
57
+ });
30
58
 
31
- function triggerEvent(element, event) {
59
+ button.on('click', function(){
32
60
 
33
- if (document.createEvent) {
61
+ console.log(input.val());
34
62
 
35
- var evt = document.createEvent("HTMLEvents");
63
+ });
36
64
 
37
- evt.initEvent(event, true, true );
65
+
38
66
 
39
- return element.dispatchEvent(evt);
40
-
41
- } else {
42
-
43
- var evt = document.createEventObject();
44
-
45
- return element.fireEvent("on"+event, evt)
46
-
47
- }
67
+ })
48
-
49
- }
50
68
 
51
69
  ```
52
70
 

2

追記

2016/10/01 13:04

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
@@ -10,11 +10,11 @@
10
10
 
11
11
  var input = document.getElementByName('name');
12
12
 
13
- var button = document..querySelectorAll('button [type="button"]');
13
+ var button = document.querySelectorAll('button [type="button"]');
14
14
 
15
- input.onclick = function(e){
15
+ input.onclick = function(){
16
16
 
17
- e.preventDefault();
17
+ input.preventDefault();
18
18
 
19
19
  triggerEvent(button, 'click');
20
20
 

1

追記

2016/10/01 12:53

投稿

tama_yn0815
tama_yn0815

スコア143

test CHANGED
@@ -12,7 +12,9 @@
12
12
 
13
13
  var button = document..querySelectorAll('button [type="button"]');
14
14
 
15
- input.onclick = function(){
15
+ input.onclick = function(e){
16
+
17
+ e.preventDefault();
16
18
 
17
19
  triggerEvent(button, 'click');
18
20