仅使用 Javascript 显示/隐藏单击按钮的密码答案

【问题标题】：Show/hide password onClick of button using Javascript only仅使用 Javascript 显示/隐藏单击按钮的密码
【发布时间】：2015-09-22 08:22:08
【问题描述】：

我想在仅使用 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>

【问题讨论】：

标签： javascript html forms passwords

【解决方案1】：

简单的内联解决方案：

<input type="password" id="myInput" name="myInput">
<button onclick="myInput.type = (myInput.type=='text') ? 'password' : 'text'; return false;"></button>

【讨论】：

【解决方案2】：

我们可以通过onclick事件来获取，我们看例子。很简单

HTML

<span>
      <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" onclick="showHide()" id="eye" />
</span>

Javascript

function showHide() {
                if (pwd.type == 'text') {
                    pwd.type = 'password';
                }
                else {
                    pwd.type = 'text';
                }
            }

【讨论】：

【解决方案3】：

  function action() {
    var my_pass = document.getElementById("pass");
    if (my_pass.type === "password") {
      my_pass.type = "text";
    } else {
      my_pass.type = "password";
    }
  }

&lt;input type="checkbox" onclick="action()"&gt;Show &lt;input type="password" id="pass" value="my-secret"&gt;

【讨论】：

【解决方案4】：

按照以下步骤操作：下载下面给出的图像。做一个文件夹。在同一文件夹中添加您的 html 文件和图像。相应地替换 javascript 和 html 代码中“b.src”的值。

图片：

function show() {
  var a = document.getElementById("pwd");
  var b = document.getElementById("EYE");
  if (a.type == "password") {
    a.type = "text";
    b.src = "https://i.stack.imgur.com/waw4z.png";
  } else {
    a.type = "password";
    b.src = "https://i.stack.imgur.com/Oyk1g.png";
  }
}

<input type="password" id="pwd">
<button onclick="show()"><img src="https://i.stack.imgur.com/Oyk1g.png" id="EYE"></button>

【讨论】：

【解决方案5】：

转储眼睛图像，并根据其状态使用显示“显示”或“隐藏”的按钮。然后，您只需单击按钮的文本。您可以将按钮样式化为无边框，并且最初具有与其周围相同的背景。通过设置 .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');
   }
}

【讨论】：

【解决方案6】：

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

另见https://www.w3schools.com/howto/howto_js_toggle_password.asp

【讨论】：

【解决方案7】：

最简单的方法是使用带有onclick 属性的按钮来切换输入的类型。

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

【讨论】：

【解决方案8】：

我的代码中的 JQuery 解决方案：（只需更改 ID）。

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

【讨论】：

@downvoter - 如果指定原因，我将不胜感激
问题中可能缺少 jQuery 标签

【解决方案9】：

这是对 Tunaki 的回答的改进。我们甚至不需要检查表单域已经处于哪个状态，因为这将完全由鼠标的状态决定。这使得密码只能被暂时查看（只要鼠标按钮被按住在按钮上）。

<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>

【讨论】：

【解决方案10】：

在您的 Javascript 代码的 else 部分中，变量“pwShown”拼写错误（如“pwShow”）。因此，pwShown 永远不会被重置为 0。

【讨论】：

【解决方案11】：

在您的代码中，每次调用 showHide() 函数时，pwShown 变量都会设置为 0。

您需要将 pwShown 变量声明为全局变量。

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

【讨论】：

【解决方案12】：

您不需要维护一个额外的“pwShown”变量来决定是显示文本还是隐藏它。您需要做的就是检查“pwd”元素的“type”属性，如下所示：

Working Example

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>

【讨论】：

【解决方案13】：

每次单击按钮时都会绑定单击事件。您不想要多个事件处理程序。此外，您在每次点击时都会重新定义 var pwShown = 0，因此您永远无法恢复输入状态（pwShown 保持不变）。

移除onclick属性并绑定点击事件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>

【讨论】：

点击后能否更改图标
pwShown=!pwShown

【解决方案14】：

根据您编写的内容，您将在 html 和 javascript 中添加事件（在 showHide 函数内）。也许您可以将您的 js 代码从您拥有的更改为：

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

【讨论】：