使用jquery单击眼睛图标时如何显示和隐藏密码 [英] How to show and hide password when click on eye icon using jquery

问题描述

我需要在点击眼睛图标时显示和隐藏用户密码，所以我为此编写了脚本，当我点击眼睛图标时，只有类在改变，但密码不可见，再次点击斜线图标应该隐藏这两种方法都不起作用如何解决这个问题?

<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span><脚本>$("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("类型", "文本");} 别的 {input.attr("类型", "密码");}});

解决方案

你的 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("类型", "文本");} 别的 {input.attr("类型", "密码");}});

<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">显示/隐藏</span><input type="password" id="pass_log_id"/>

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>

解决方案

Your input is actually string. Check console, you should see that string does not have method attr() because you assign $().attr() to 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"/>

这篇关于使用jquery单击眼睛图标时如何显示和隐藏密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！