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

質問編集履歴

1

HTML等の追加

2020/11/02 15:15

投稿

pondering
pondering

スコア104

title CHANGED
File without changes
body CHANGED
@@ -19,21 +19,77 @@
19
19
  .js-password-label
20
20
 
21
21
  ```
22
+ <!DOCTYPE html>
23
+ <html>
24
+ <head>
25
+ <meta charset="utf-8">
26
+ <title>テスト</title>
27
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
28
+ </head>
29
+ <body>
30
+
31
+ <form>
32
+ <div class="box">
33
+ <p>Password</p>
34
+ <div class="box-pass">
35
+ <input class="js-password" type="password" value="" id="pass-login" name="pass-login" maxlength="10" placeholder="99999" required="required">
36
+ <input class="js-password-toggle button__input" id="password--eye" type="checkbox" name="password01">
37
+ <label class="js-password-label button__label" for="password--eye"><i class="fas fa-eye"></i></label>
38
+ </div>
39
+ </div>
40
+ <div class="box">
41
+ <p>Password(確認)</p>
42
+ <div class="box-pass">
43
+ <input class="js-password" type="password" value="" id="pass-login-kakunin" name="pass-login-kakunin" maxlength="10" placeholder="99999" required="required">
44
+ <input class="js-password-toggle button__input" id="kakunin--eye" type="checkbox" name="password02">
45
+ <label class="js-password-label button__label" for="kakunin--eye"><i class="fas fa-eye"></i></label>
46
+ </div>
47
+ </div>
48
+ </form>
49
+ <style type="text/css">
50
+ .box {
51
+ display: flex;
52
+ align-items: center;
53
+ }
54
+ p {
55
+ padding-right: 20px;
56
+ }
57
+ .box-pass {
58
+ width: 200px;
59
+ position: relative;
60
+ }
61
+ .box-pass input {
62
+ width: 200px;
63
+ height: 30px;
64
+ }
65
+ input.button__input {
66
+ display: none;
67
+ }
68
+ .button__label {
69
+ position: absolute;
70
+ right: 10px;
71
+ top: 5px;
72
+ }
73
+ </style>
74
+ <footer>
75
+ </footer>
22
- <script>
76
+ <script>
23
- const passwordToggle = document.querySelector('.js-password-toggle');
77
+ const passwordToggle = document.querySelector('.js-password-toggle');
24
- passwordToggle.addEventListener('change', function () {
78
+ passwordToggle.addEventListener('change', function () {
25
- const password = document.querySelector('.js-password'),
79
+ const password = document.querySelector('.js-password'),
26
- passwordLabel = document.querySelector('.js-password-label');
80
+ passwordLabel = document.querySelector('.js-password-label');
27
- if (password.type === 'password') {
81
+ if (password.type === 'password') {
28
- password.type = 'text';
82
+ password.type = 'text';
29
- passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
83
+ passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
30
- } else {
84
+ } else {
31
- password.type = 'password';
85
+ password.type = 'password';
32
- passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
86
+ passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
33
- }
87
+ }
34
- password.focus();
88
+ password.focus();
35
- });
89
+ });
36
- </script>
90
+ </script>
91
+ </body>
92
+ </html>
37
93
  ```
38
94
 
39
95
  ご教示いただけますと幸いです。