javascript 使用jquery单击眼睛图标时如何显示和隐藏密码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51552661/
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
How to show and hide password when click on eye icon using jquery
提问by Anonymous
I have requirement to show and hide user password when click on eye icon so I had written script for that,when I click on eye icon only class is changing but password is not visible and again click on slash-eye icon it should hidden both these method not working how to solve this issue?
我需要在单击眼睛图标时显示和隐藏用户密码，所以我为此编写了脚本，当我单击眼睛图标时，只有类在更改，但密码不可见，再次单击斜线图标，它应该隐藏这两个方法不起作用如何解决这个问题？
<input type="password" name="player_password" id="pass_log_id" />
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>
<script>
$("body").on('click','.toggle-password',function(){
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#pass_log_id").attr("type");
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
</script>
回答by Justinas
Your inputis actually string. Check console, you should see that string does not have method attr()because you assign $().attr()to input
你input实际上是字符串。检查控制台，您应该看到该字符串没有方法，attr()因为您分配$().attr()给input
$("body").on('click', '.toggle-password', function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#pass_log_id");
if (input.attr("type") === "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password">Show/Hide</span>
<input type="password" id="pass_log_id"/>回答by SilverSurfer
You have to remove var .attr("type");from your var input = $("#pass_log_id").attr("type");.
You also can do it more elegant with ternary operatorto toggle between type textand password:
你必须.attr("type");从你的var input = $("#pass_log_id").attr("type");.
您还可以更优雅ternary operator地在type text和之间切换password：
$(document).on('click', '.toggle-password', function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $("#pass_log_id");
input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password')
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<body>
<input id="pass_log_id" type="password" name="pass" value="MySecretPass">
<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>
</body>回答by Imad Ullah
<input type="checkbox" onclick="myFunction()">Show <input type="password" id="myInput" value="Password">
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>回答by Akhil Punalur
Please replace
请更换
var input = $("#pass_log_id").attr("type");
var input = $("#pass_log_id").attr("type");
with
和
var input = $("#pass_log_id");
var input = $("#pass_log_id");
you need the element not the attribute,
你需要元素而不是属性，
