logo标签列表

当点击眼睛图标时如何使用jQuery显示和隐藏密码

javascriptjquery
16

我需要在点击眼睛图标时显示和隐藏用户密码，因此我编写了脚本。但是，当我点击眼睛图标时，只有类改变了，但密码没有显示；再次点击斜杠-眼睛图标时，应该隐藏这两种方法都不起作用，如何解决这个问题？

<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>
1
可能是 https://dev59.com/BqTia4cB1Zd3GeqP9CXP 的重复问题。 - Sudhir Ojha
1
可能是Jquery显示/隐藏密码的重复问题。 - Manasi
这里有一个可工作的代码示例：https://codepen.io/Sohail05/pen/yOpeBm - Aravind S
@Manasi 请告诉我我的代码有什么问题。 - Anonymous
@SudhirOjha 发送的链接看起来很复杂，请告诉我我的代码有什么问题，这样我就可以进行更正。 - Anonymous
1
@MSp，你正在执行 “.attr（“type”）;” 两次。1）var input = $（“＃pass_log_id”）.attr（“type”）;和2）if（input.attr（“type”）===“password”） - Manasi
8个回答
23
您的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"/>

15

你需要从var input = $("#pass_log_id").attr("type");中删除.attr("type");。
你也可以使用三目运算符更优雅地在文本类型和密码类型间切换：

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

1
如果你要使用三元运算符，那就一定要用到底：input.attr('type', input.attr('type') === 'password' ? 'text' : 'password') - targumon
5

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

1
虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - adiga
@adiga 感谢您的时间。 - Imad Ullah
2

const togglePasswordEye = '<i class="fa fa-eye toggle-password-eye"></i>';
const togglePasswordEyeSlash = '<i class="fa fa-eye-slash toggle-password-eye"></i>';

$(togglePasswordEyeSlash).insertAfter('input[type=password]');
$('input[type=password]').addClass('hidden-pass-input')

$('body').on('click', '.toggle-password-eye', function (e) {
    let password = $(this).prev('.hidden-pass-input');

    if (password.attr('type') === 'password') {
        password.attr('type', 'text');
        $(this).addClass('fa-eye').removeClass('fa-eye-slash');
    } else {
        password.attr('type', 'password');
        $(this).addClass('fa-eye-slash').removeClass('fa-eye');
    }
})
.toggle-password-eye {
    float: right;
    top: -25px;
    right: 10px;
    position: relative;
    cursor: pointer;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="password" type="password" class="form-control" name="password" required autocomplete="current-password">

输出：

这里输入图片描述

这里输入图片描述

为什么这个答案没有被接受为正确答案？它对我帮助很大。 - Benjamin Mwendwa Munyoki
我尝试过，但没有起作用。 - undefined
1
请将以下内容进行翻译：

请用

var input = $("#pass_log_id");

替换

var input = $("#pass_log_id").attr("type");

您需要的是元素而不是属性，

1

HTML代码

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

jQuery 代码

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

这是一个简单的脚本，带有密码切换功能 HTML和JavaScript代码

<div class="input-box">
    <input type="password" placeholder="Password" id="pass">
    <img src="eye-close.png" onclick="handle()" id="eyeicon">
</div>

<script>

    function handle() {

        var pass = document.getElementById('pass')
        var eyeicon = document.getElementById('eyeicon')

        if (pass.type == "password") {
            pass.type = "text"
            eyeicon.src = "eye-open.png";
        } else {
            pass.type = "password"
            eyeicon.src = "eye-close.png";
        }
    }

</script>
0
function click() {
     // toggle the type attribute
    const togglePassword = document.querySelector("#togglePassword");
    const passwordV = document.querySelector("#password_field");
    const type = passwordV.getAttribute("type") === "password" ? "text" : "password";
    togglePassword.className === 'fa fa-eye-slash viewpass mr-4 text-muted' ? document.getElementById("togglePassword").className = 'fa fa-eye viewpass mr-4 text-muted' : document.getElementById("togglePassword").className = 'fa fa-eye-slash viewpass mr-4 text-muted';
    passwordV.setAttribute("type", type);

}


<input type="password" id="password_field"/>

<span className="fa fa-eye-slash viewpass mr-4 text-muted" onClick={click} id="togglePassword"></span>

在添加CSS中

  .viewpass{
  float: right;
  margin-left: -25px;
  margin-top: -26px;
  position: relative;
  font-size: large;
  z-index: 2;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接