仅使用 Javascript 在单击按钮时显示/隐藏密码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31224651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide password onClick of button using Javascript only
提问by user0428
I want to create password toggle function when clicked on the eye icon using Javascript only. I have written code for it but it works only to show the password text and not the other way round. Can someone see the logic error in the code below.
我想在仅使用 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>回答by dfsq
You are binding click event every time you click a button. You don't want multiple event handlers. Plus you are redefining var pwShown = 0on every click so you can never revert input state (pwShownstays the same).
每次单击按钮时，您都在绑定单击事件。您不想要多个事件处理程序。另外，您var pwShown = 0每次点击都在重新定义，因此您永远无法恢复输入状态（pwShown保持不变）。
Remove onclick attribute and bind click event with addEventListener:
删除 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>回答by Ameen Ra'is
The easiest way is using a button with an onclickattribute that toggles the type of the input.
最简单的方法是使用具有onclick切换输入类型的属性的按钮。
<input type="password" id="password" value="myPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
else password.type = 'text';">toggle</button>回答by Prateek
You don't need to maintain one extra "pwShown" variable to decide whether to show text or hide it. All you need to do is to examine "type" attribute of "pwd" element as below :
您不需要维护一个额外的“pwShown”变量来决定是显示文本还是隐藏文本。您需要做的就是检查“pwd”元素的“type”属性，如下所示：
JavaScript :
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 :
HTML :
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
<img src="eye.png" alt="eye"/>
</button>
回答by Prateek
Follow these steps: Download the images given below. Make a folder. Add your html file and the images in the same folder. Replace the value of "b.src" in javascript as well as in your html code accordingly.
请按照以下步骤操作： 下载下面给出的图像。制作文件夹。将您的 html 文件和图像添加到同一文件夹中。相应地替换 javascript 和 html 代码中“b.src”的值。
Images :
图片 ：
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>回答by Imad Ullah
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">回答by Dilip Kumar Choudhary
We can get by using onclick event, let's see example.It is very easy
我们可以通过使用 onclick 事件来获取，让我们看看例子。很容易
HTML
HTML
<span>
<img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" onclick="showHide()" id="eye" />
</span>
Javascript
Javascript
function showHide() {
if (pwd.type == 'text') {
pwd.type = 'password';
}
else {
pwd.type = 'text';
}
}
回答by Lovro
JQuery solution from my code: (just change the IDs).
我的代码中的 JQuery 解决方案：（只需更改 ID）。
$(document).ready(function () {
$("#eye").click(function () {
if ($("#password").attr("type") === "password") {
$("#password").attr("type", "text");
} else {
$("#password").attr("type", "password");
}
});
});
回答by Mindastic
Based on what you wrote, you are adding the event both in html and in javascript (inside showHidefunction). May be you can change your js code from what you have, to:
根据您编写的内容，您将在 html 和 javascript（内部showHide函数）中添加事件。也许您可以将您的 js 代码从您拥有的更改为：
function showHide()
{
var input = document.getElementById("pwd");
if (input.getAttribute("type") === "password") {
show();
} else {
hide();
}
}
回答by user5952347
The variable "pwShown" is misspelled (as "pwShow") in the else section of your Javascript code. Therefore, pwShown never gets reset to 0.
在您的 Javascript 代码的 else 部分中，变量“pwShown”拼写错误（如“pwShow”）。因此，pwShown 永远不会被重置为 0。
回答by Mike Lewis
This is an improvement upon Tunaki's answer. We don't even care to check which state the form field is in already, because this will be entirely determined by the state of the mouse. This allows the password to be only momentarily viewed (only as long as the mouse button is held down over the button.)
这是对 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>
