Показать / скрыть пароль Как это исправить?

ProgramBox

Показать / скрыть пароль Как это исправить?

Post author:admin
Запись опубликована:18 июля, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я создаю веб-страницу, я просто просматриваю ее индекс, и на данный момент в ней не больше кода, чем в HTML, CSS и JAVASCRIPT, однако я представляю проблему с дизайном и кодом, которая мешает мне добавлять значок глаза, чтобы видеть или скрыватьвведите пароль при вводе пароля, не перемещая значок блокировки или заполнитель.

 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>

Развернуть фрагмент

Вы можете мне помочь? Я также добавляю ссылку, чтобы иметь возможность просматривать веб-страницу целиком и взаимодействовать с опциями (начать сеанс, зарегистрироваться, переключиться в темный режим и т. Д.): https://priva.reversecode.repl.co /

Ответ №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>

Развернуть фрагмент

1. Отлично! Это именно то, что я искал. Большое вам спасибо за ваше эффективное расположение в моем коде. Если бы у меня была репутация 15, я бы проголосовал «за», а пока я отмечаю ответ как правильный.

Ответ №2:

я вставил ваш код в jsfiddle и просто добавил ссылку font awesome 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 /

Ответ №3:

Проверьте изменения, которые я внес в ваш 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>

Развернуть фрагмент

1. Это не то, что я искал, однако мне очень помогло дать мне наглядное руководство по устранению проблемы. Большое вам спасибо за то, что поделились своим ответом. Если бы у меня была репутация 15, я бы проголосовал «за».

Метки: Показать/скрыть пароль Как это исправить?