Показать/скрыть пароль onClick of button используя только Javascript

Я хочу создать функцию переключения пароля при нажатии на значок глаза, используя только Javascript. Я написал код для него, но он работает только для отображения текста пароля, а не наоборот. Может кто-то увидеть логическую ошибку в коде ниже.

function show() {
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'text');
}

function hide() {
  var p = document.getElementById('pwd');
  p.setAttribute('type', 'password');
}

function showHide() {
  var pwShown = 0;

  document.getElementById("eye").addEventListener("click", function() {
    if (pwShown == 0) {
      pwShown = 1;
      show();
    } else {
      pwShow = 0;
      hide();
    }
  }, false);
}
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" onclick="showHide()" id="eye">
  <img src="eye.png" alt="eye"/>
</button>

Ответы

Ответ 1

Вы привязываете событие click каждый раз, когда вы нажимаете кнопку. Вам не нужны несколько обработчиков событий. Кроме того, вы переопределяете var pwShown = 0 на каждый клик, чтобы вы не могли вернуть состояние ввода (pwShown остается неизменным).

Удалить атрибут onclick и связать событие click с addEventListener:

function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
}

function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
}

var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
        pwShown = 1;
        show();
    } else {
        pwShown = 0;
        hide();
    }
}, false);
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>

Ответ 2

Самый простой способ - использовать кнопку с атрибутом onclick, который переключает тип ввода.

<input type="password" id="password" value="myPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
  else password.type = 'text';">toggle</button>

Ответ 3

Вам не нужно поддерживать одну дополнительную переменную pwShown, чтобы решить, показывать ли текст или скрыть ее. Все, что вам нужно сделать, это изучить атрибут "type" элемента "pwd", как показано ниже:

Рабочий пример

JavaScript:

document.getElementById("eye").addEventListener("click", function(e){
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password"){
            pwd.setAttribute("type","text");
        } else {
            pwd.setAttribute("type","password");
        }
    });

HTML:

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>

Ответ 4

Выполните следующие действия: Загрузите изображения, приведенные ниже. Сделать папку. Добавьте свой HTML файл и изображения в одной папке. Замените значение "b.src" в javascript, а также в HTML-коде соответственно.

Изображения: Images Images

function show() {
  var a = document.getElementById("pwd");
  var b = document.getElementById("EYE");
  if (a.type == "password") {
    a.type = "text";
    b.src = "/img/b8d08d60762c6a5c6cd28573d0b42522.png";
  } else {
    a.type = "password";
    b.src = "/img/f1fbdf9ec1ec2a465f6be4a7579f102e.png";
  }
}
<input type="password" id="pwd">
<button onclick="show()"><img src="/img/f1fbdf9ec1ec2a465f6be4a7579f102e.png" id="EYE"></button>

Ответ 5

Основываясь на том, что вы написали, вы добавляете событие как в html, так и в javascript (внутри showHide). Возможно, вы можете изменить свой код js от того, что у вас есть, чтобы:

function showHide()
{
  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") {
    show();
  } else {
    hide();
  }
}

Ответ 6

Переменная "pwShown" написана с ошибкой (как "pwShow" ) в разделе else вашего кода Javascript. Поэтому pwShown никогда не получает reset до 0.

Ответ 7

Это улучшает ответ Тунаки. Нам даже не нужно проверять, в каком состоянии находится поле формы, потому что это будет полностью определено состоянием мыши. Это позволяет просматривать только мгновенный просмотр (только до тех пор, пока кнопка мыши удерживается нажатой над кнопкой.)

<html>
<head>
    <title>Visible Password Test</title>
</head>

<body>
Password : <input type="password" name="password" id="password" />

<button type="button" id="eye" title="Did you enter your password correctly?" 
    onmousedown="password.type='text';" 
    onmouseup="password.type='password';" 
    onmouseout="password.type='password';">Peek at Password</button>

</body>
</html>

Ответ 8

Решение JQuery из моего кода: (просто измените идентификаторы).

$(document).ready(function () {
        $("#eye").click(function () {
            if ($("#password").attr("type") === "password") {
                $("#password").attr("type", "text");
            } else {
                $("#password").attr("type", "password");
            }
        });
  });

Ответ 9

В вашем коде каждый раз, когда вы вызываете функцию showHide(), переменная pwShown имеет значение 0.

Вам нужно объявить переменную pwShown глобальной.

var pwShown = 0;
function showHide()
{
 ...
}

Ответ 10

Снимите изображение глаза и вместо этого используйте кнопку с надписью "Показать" или "Скрыть" в соответствии с его состоянием. Затем вы просто нажимаете на текст кнопки. Вы можете стилизовать кнопку так, чтобы она была без полей и изначально имела тот же фон, что и окружающая среда. Выделите кнопку, установив .show: hover, чтобы осветлить фон кнопки или еще, чтобы осветлить цвет текста "Показать/Скрыть". Поместив ввод и кнопку в один и тот же промежуток, вы получите оба встроенных элемента (CSS - span {display: inline-block;}) и выровненных по вертикали от одного и того же дна.

Используйте обычный текстовый ввод чуть ниже диапазона для пробела для отображения предупреждений об ошибках проверки. Убедитесь, что индекс вкладки равен -1, а цвет фона и рамки совпадают с окружением.

  .
  .
  .

  <span class="pwSpan">
    <input type="password" placeholder="Password" id="pwd"  class="masked"  name="password" onblur="return checkPassword();"/>
    <button type="button" class="show" id="show" value="Show" onclick="showHide()" tabIndex="-1" autocomplete="off" >
    </button>
  </span>
  <input type="text" class="error" name="pwErr" value="" tabIndex="-1" />
  .
  .
  .

function showHide()
{
   const pwField = document.getElementById("pwd");
   const showHideValue = document.getElementById("show").value;

   if(showHideValue.trim() === "Show")
   {
      showHideValue = "Hide";
      pwField.setAttribute('type', 'text');
   }
   else 
   {
      showHideValue = "Show";
      pwField.setAttribute('type', 'password');
   }
}