質問編集履歴

1

HTML等の追加

2020/11/02 15:15

投稿

pondering
pondering

スコア104

test CHANGED
File without changes
test CHANGED
@@ -40,35 +40,147 @@
40
40
 
41
41
  ```
42
42
 
43
- <script>
43
+ <!DOCTYPE html>
44
44
 
45
- const passwordToggle = document.querySelector('.js-password-toggle');
45
+ <html>
46
46
 
47
- passwordToggle.addEventListener('change', function () {
47
+ <head>
48
48
 
49
- const password = document.querySelector('.js-password'),
49
+ <meta charset="utf-8">
50
50
 
51
- passwordLabel = document.querySelector('.js-password-label');
51
+ <title>テスト</title>
52
52
 
53
- if (password.type === 'password') {
53
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
54
54
 
55
- password.type = 'text';
55
+ </head>
56
56
 
57
- passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
57
+ <body>
58
58
 
59
- } else {
60
59
 
61
- password.type = 'password';
62
60
 
63
- passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
61
+ <form>
64
62
 
65
- }
63
+ <div class="box">
66
64
 
67
- password.focus();
65
+ <p>Password</p>
68
66
 
69
- });
67
+ <div class="box-pass">
70
68
 
69
+ <input class="js-password" type="password" value="" id="pass-login" name="pass-login" maxlength="10" placeholder="99999" required="required">
70
+
71
+ <input class="js-password-toggle button__input" id="password--eye" type="checkbox" name="password01">
72
+
73
+ <label class="js-password-label button__label" for="password--eye"><i class="fas fa-eye"></i></label>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+ <div class="box">
80
+
81
+ <p>Password(確認)</p>
82
+
83
+ <div class="box-pass">
84
+
85
+ <input class="js-password" type="password" value="" id="pass-login-kakunin" name="pass-login-kakunin" maxlength="10" placeholder="99999" required="required">
86
+
87
+ <input class="js-password-toggle button__input" id="kakunin--eye" type="checkbox" name="password02">
88
+
89
+ <label class="js-password-label button__label" for="kakunin--eye"><i class="fas fa-eye"></i></label>
90
+
91
+ </div>
92
+
93
+ </div>
94
+
95
+ </form>
96
+
97
+ <style type="text/css">
98
+
99
+ .box {
100
+
101
+ display: flex;
102
+
103
+ align-items: center;
104
+
105
+ }
106
+
107
+ p {
108
+
109
+ padding-right: 20px;
110
+
111
+ }
112
+
113
+ .box-pass {
114
+
115
+ width: 200px;
116
+
117
+ position: relative;
118
+
119
+ }
120
+
121
+ .box-pass input {
122
+
123
+ width: 200px;
124
+
125
+ height: 30px;
126
+
127
+ }
128
+
129
+ input.button__input {
130
+
131
+ display: none;
132
+
133
+ }
134
+
135
+ .button__label {
136
+
137
+ position: absolute;
138
+
139
+ right: 10px;
140
+
141
+ top: 5px;
142
+
143
+ }
144
+
145
+ </style>
146
+
147
+ <footer>
148
+
149
+ </footer>
150
+
151
+ <script>
152
+
153
+ const passwordToggle = document.querySelector('.js-password-toggle');
154
+
155
+ passwordToggle.addEventListener('change', function () {
156
+
157
+ const password = document.querySelector('.js-password'),
158
+
159
+ passwordLabel = document.querySelector('.js-password-label');
160
+
161
+ if (password.type === 'password') {
162
+
163
+ password.type = 'text';
164
+
165
+ passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
166
+
167
+ } else {
168
+
169
+ password.type = 'password';
170
+
171
+ passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
172
+
173
+ }
174
+
175
+ password.focus();
176
+
177
+ });
178
+
71
- </script>
179
+ </script>
180
+
181
+ </body>
182
+
183
+ </html>
72
184
 
73
185
  ```
74
186