仅使用 Javascript 显示/隐藏单击按钮的密码
Posted
技术标签:
【中文标题】仅使用 Javascript 显示/隐藏单击按钮的密码【英文标题】：Show/hide password onClick of button using Javascript only 【发布时间】：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" />
</button>【问题讨论】：
【参考方案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" 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";
<input type="checkbox" onclick="action()">Show <input type="password" id="pass" value="my-secret">【讨论】：
【参考方案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 - spandisplay: 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" />
</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" />
</button>【讨论】：
点击后能否更改图标pwShown=!pwShown【参考方案14】：
根据您编写的内容，您将在 html 和 javascript 中添加事件（在 showHide 函数内）。也许您可以将您的 js 代码从您拥有的更改为：
function showHide()
var input = document.getElementById("pwd");
if (input.getAttribute("type") === "password")
show();
else
hide();
【讨论】：
以上是关于仅使用 Javascript 显示/隐藏单击按钮的密码的主要内容，如果未能解决你的问题，请参考以下文章
Razor 显示/隐藏基于使用 javascript 的单选按钮
单击提交按钮后，PHP 文件和 Javascript 函数未捕获 Html div id 以显示隐藏的 div
显示/隐藏 DIV 元素 Javascript 的多次不需要的点击