teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問inputに正しく入力された時だけsubmitを有効にしたい

編集履歴

質問編集履歴

3

初心者マークを付けました

2020/02/05 00:09

投稿

synth
synth

スコア9

test CHANGED
File without changes
test CHANGED
@@ -8,9 +8,9 @@
8
8
 
9
9
  [実現したい機能]
10
10
 
11
- inputに文字が入力された時
11
+ inputに文字が入力された時、submitのopacityを1にしたい。
12
12
 
13
- submitのopacityを1にしたい
13
+ そのような動きができるのか、初心者のため分かりません。
14
14
 
15
15
 
16
16
 
@@ -24,7 +24,11 @@
24
24
 
25
25
  [現在の問題]
26
26
 
27
- inputに入力（メールアドレス）が会った際に、submitの要素を変更することができない。
27
+ inputに入力（メールアドレス）があった際に、submitの要素を変更することができない。
28
+
29
+
30
+
31
+ HTML、CSSにそのような機能をもつ、プロパティや要素があるのかどうかも分からない。
28
32
 
29
33
 
30
34
 

2

書式の改善

2020/02/05 00:09

投稿

synth
synth

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,30 @@
1
+ リンク先はcodepenとなっています。
2
+
3
+ こちらに載せているコードと同じものです。
4
+
1
5
  [リンク内容](https://codepen.io/MICROBE1985/pen/oNgKQOZ?editors=1100)
2
6
 
3
7
 
4
8
 
9
+ [実現したい機能]
10
+
5
11
  inputに文字が入力された時
6
12
 
7
13
  submitのopacityを1にしたい
14
+
15
+
16
+
17
+ [試した事]
18
+
19
+ inputに入力(メールアドレス）があった際に、inputの要素を変更することはできましたが、
20
+
21
+ submitの要素を変更することができない。
22
+
23
+
24
+
25
+ [現在の問題]
26
+
27
+ inputに入力（メールアドレス）が会った際に、submitの要素を変更することができない。
8
28
 
9
29
 
10
30
 
@@ -34,23 +54,23 @@
34
54
 
35
55
  button{
36
56
 
37
- margin: 0 ;
57
+ 　margin: 0 ;
38
58
 
39
- padding: 12px 17px;
59
+ 　padding: 12px 17px;
40
60
 
41
- font-size: 14px;
61
+ 　font-size: 14px;
42
62
 
43
- font-weight: 600;
63
+ 　font-weight: 600;
44
64
 
45
- line-height: 14px;
65
+ 　line-height: 14px;
46
66
 
47
- color: #ffffff;
67
+ 　color: #ffffff;
48
68
 
49
- background-color: #008489;
69
+ background-color: #008489;
50
70
 
51
- border-radius: 5px;
71
+ border-radius: 5px;
52
72
 
53
- border-style: none;
73
+ border-style: none;
54
74
 
55
75
  }
56
76
 
@@ -86,21 +106,21 @@
86
106
 
87
107
  background-color: white;
88
108
 
89
- width: 450px;
109
+ 　　width: 450px;
90
110
 
91
- height: 40px;
111
+ 　　height: 40px;
92
112
 
93
- padding: 10px 20px;
113
+ 　　padding: 10px 20px;
94
114
 
95
- margin: 10px 0;
115
+ 　　margin: 10px 0;
96
116
 
97
- font-size: 18px;
117
+ 　　font-size: 18px;
98
118
 
99
- border-radius: 5px;
119
+ 　　border-radius: 5px;
100
120
 
101
- border: 0px white;
121
+ 　　border: 0px white;
102
122
 
103
- position: relative;
123
+ 　　position: relative;
104
124
 
105
125
  }
106
126
 

1

codeを追加

2020/02/04 23:58

投稿

synth
synth

スコア9

test CHANGED
File without changes
test CHANGED
@@ -5,3 +5,109 @@
5
5
  inputに文字が入力された時
6
6
 
7
7
  submitのopacityを1にしたい
8
+
9
+
10
+
11
+ ```HTML
12
+
13
+ <div class="mail-button">
14
+
15
+ <input type="email" name="email">
16
+
17
+ <button class="button-green" type="submit" id="submit">
18
+
19
+ メールアドレスを追加
20
+
21
+ </button>
22
+
23
+ </div>
24
+
25
+ ```
26
+
27
+ ```CSS
28
+
29
+ *{
30
+
31
+ background-color: gray;
32
+
33
+ }
34
+
35
+ button{
36
+
37
+ margin: 0 ;
38
+
39
+ padding: 12px 17px;
40
+
41
+ font-size: 14px;
42
+
43
+ font-weight: 600;
44
+
45
+ line-height: 14px;
46
+
47
+ color: #ffffff;
48
+
49
+ background-color: #008489;
50
+
51
+ border-radius: 5px;
52
+
53
+ border-style: none;
54
+
55
+ }
56
+
57
+ .mail-button{
58
+
59
+ position: relative;
60
+
61
+ }
62
+
63
+ .button-green{
64
+
65
+ position: absolute;
66
+
67
+ top: 20px;
68
+
69
+ left: 300px;
70
+
71
+ opacity:0.5;
72
+
73
+ }
74
+
75
+
76
+
77
+ input:focus{
78
+
79
+ background-color: ;
80
+
81
+ }
82
+
83
+
84
+
85
+ input{
86
+
87
+ background-color: white;
88
+
89
+ width: 450px;
90
+
91
+ height: 40px;
92
+
93
+ padding: 10px 20px;
94
+
95
+ margin: 10px 0;
96
+
97
+ font-size: 18px;
98
+
99
+ border-radius: 5px;
100
+
101
+ border: 0px white;
102
+
103
+ position: relative;
104
+
105
+ }
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+ ```