顯示/隱藏密碼 如何解決這個問題？

Question

I am creating a web page, I am just going through the index of it, and at the moment it does not have more code than HTML, CSS and JAVASCRIPT, however, I am presenting a problem with the design and the code that prevents me從添加眼睛圖標到在密碼條目中查看或隱藏密碼，無需移動鎖定圖標或占位符。

 const togglePassword = document.querySelector('#togglePassword'); const password = document.querySelector('#id_password'); togglePassword.addEventListener('click', function(e) { // toggle the type attribute const type = password.getAttribute('type') === 'password'? 'text': 'password'; password.setAttribute('type', type); // toggle the eye slash icon this.classList.toggle('fa-eye-slash'); } );

 .input - field { max - width: 380 px; width: 100 %; height: 55 px; background - color: var (--bg - input); margin: 10 px 0; border - radius: 55 px; display: grid; grid - template - columns: 15 % 85 %; padding: 0.4 rem; }.input - field i { text - align: center; line - height: 55 px; color: var (--input - icon); font - size: 1.1 rem; } # togglePassword { text - align: center; color: var (--input - icon); padding: 10 px; }.passtoggle { padding - top: 2 px; }.input - field input { background: none; outline: none; border: none; line - height: 1; font - weight: 600; font - size: 1.1 rem; color: var (--input); }

 <div class="input-field"> <i class="fas fa-user"></i> <input type="text" name="username" autocomplete="username" placeholder="Nombre de usuario"> </div> <div class="input-field"> <i class="fas fa-lock"></i> <input type="password" name="password" autocomplete="current-password" placeholder="Contraseña" id="id_password"> <i class="far fa-eye" id="togglePassword" style="cursor: pointer;"></i> </div>

你能幫助我嗎？ 我還添加了一個鏈接，以便能夠完整查看 web 頁面並與選項進行交互（啟動 session、注冊、切換到暗模式等）： Z5E056C500A1C4B6A7110B50D8071110B50D807.reBpl。

Answer 1

 let btn = document.getElementById('pass-btn'); let icon = btn.querySelector('ion-icon'); let input = document.getElementById('password'); btn.addEventListener('click', () => { input.type == 'password'? [input.type = 'text', icon.setAttribute('name', 'eye-off')]: [input.type = 'password', icon.setAttribute('name', 'eye')]; input.focus(); });

 * { margin: 0; padding: 0; box-sizing: border-box; }.form { margin: 20px auto; } div { position: relative; width: 200px; height: 30px; margin-bottom: 10px; } input { display: block; width: 100%; height: 100%; padding: 0 5px; } ion-icon { font-size: 20px; } button { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 100%; right: 0; display: flex; justify-content: center; align-items: center; cursor: pointer; border: none; outline: none; background: none; } button:hover > ion-icon { opacity: 0.8; }

 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <div class="form"> <div> <input type="email" placeholder="E-mail" /> </div> <div> <input type="password" placeholder="Password" id="password" /> <button id="pass-btn"> <ion-icon name="eye"></ion-icon> </button> </div> </div>

Answer 2

查看我對您的 HTML 和 Javascript 所做的更改。 當然，您可以根據需要隨意設置輸入和復選框的樣式。

旁注：我從未見過 CSS 寫成max - width:這些空格似乎沒有必要，並且在大多數瀏覽器中都無法正確解析。

 function myFunction() { var x = document.getElementById("hidePassword"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } }

 .input - field { max - width: 380 px; width: 100 %; height: 55 px; background - color: var (--bg - input); margin: 10 px 0; border - radius: 55 px; display: grid; grid - template - columns: 15 % 85 %; padding: 0.4 rem; }.input - field i { text - align: center; line - height: 55 px; color: var (--input - icon); font - size: 1.1 rem; } # togglePassword { text - align: center; color: var (--input - icon); padding: 10 px; }.passtoggle { padding - top: 2 px; }.input - field input { background: none; outline: none; border: none; line - height: 1; font - weight: 600; font - size: 1.1 rem; color: var (--input); }

 <div class="input-field"> <i class="fas fa-user"></i> <input type="text" name="username" autocomplete="username" placeholder="Nombre de usuario"> </div> <div class="input-field"> <i class="fas fa-lock"></i> <input type="password" autocomplete="current-password" placeholder="Contraseña" id="hidePassword"> <input type="checkbox" onclick="myFunction()">Show Password <i class="far fa-eye" id="togglePassword" style="cursor: pointer;"></i> </div>

Answer 3

我將您的代碼粘貼在 jsfiddle 中，然后添加字體很棒的 cdn 鏈接，它就可以工作

<html>
<body>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<style>
  .input - field {
  max - width: 380 px;
  width: 100 %;
  height: 55 px;
  background - color: var (--bg - input);
  margin: 10 px 0;
  border - radius: 55 px;
  display: grid;
  grid - template - columns: 15 % 85 %;
  padding: 0 .4 rem;
}

.input - field i {
  text - align: center;
  line - height: 55 px;
  color: var (--input - icon);
  font - size: 1.1 rem;
}

# togglePassword {
  text - align: center;
  color: var (--input - icon);
  padding: 10 px;
}

.passtoggle {
  padding - top: 2 px;
}

.input - field input {
  background: none;
  outline: none;
  border: none;
  line - height: 1;
  font - weight: 600;
  font - size: 1.1 rem;
  color: var (--input);
}
</style>
  <div class="input-field">
  <i class="fas fa-user"></i>
  <input type="text" name="username" autocomplete="username" placeholder="Nombre de usuario">
</div>
<div class="input-field">
  <i class="fas fa-lock"></i>
  <input type="password" name="password" autocomplete="current-password" placeholder="Contraseña" id="id_password">
  <i class="far fa-eye" id="togglePassword" style="cursor: pointer;"></i>
</div>
<script>
    const togglePassword = document.querySelector('#togglePassword');
  const password = document.querySelector('#id_password');
  togglePassword.addEventListener('click', function(e) {
      // toggle the type attribute
      const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
      password.setAttribute('type', type);
      // toggle the eye slash icon
      this.classList.toggle('fa-eye-slash');
    }

  );
</script>

</body>
</html>

這是jsfiddle鏈接https://jsfiddle.net/6f0e2mc5/