How to show and hide password when click on eye icon using jquery

Question

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>

Possible duplicate of https://stackoverflow.com/questions/45561636/jquery-show-hide-password — Sudhir Ojha, Jul 27 '18 at 07:18
Possible duplicate of [Jquery show/hide password](https://stackoverflow.com/questions/45561636/jquery-show-hide-password) — Manasi, Jul 27 '18 at 07:19
A working code example here https://codepen.io/Sohail05/pen/yOpeBm — Aravind S, Jul 27 '18 at 07:19
@SudhirOjha post link which you have sent is looking complex so please tell me what is wrong in my code so i can correct that — Anonymous, Jul 27 '18 at 07:21
@MSp you are doing ** ".attr("type");" 2 times. ** 1) var input = $("#pass_log_id").attr("type"); and 2) if (input.attr("type") === "password") — Manasi, Jul 27 '18 at 07:22

score 19 · Accepted Answer · answered Jul 27 '18 at 07:19

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

SilverSurfer · Answer 2 · 2018-07-27T07:27:01.600

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 operator to toggle between type text and 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>

If you're going for ternary, then go all the way: `input.attr('type', input.attr('type') === 'password' ? 'text' : 'password')` — targumon, Jun 21 '21 at 15:42

score 3 · Answer 3 · edited Apr 01 '19 at 10:39

3

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

edited Apr 01 '19 at 10:39

adiga

31,610
8
53
74

answered Apr 01 '19 at 10:30

Imad Ullah

663
6
15

1

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – adiga Apr 01 '19 at 10:38
@adiga Thanks for your time – Imad Ullah Apr 01 '19 at 11:12

score 1 · Answer 4 · answered Jul 27 '18 at 07:55

1

Please replace

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

with

var input = $("#pass_log_id");

you need the element not the attribute,

answered Jul 27 '18 at 07:55

Akhil Punalur

31
3

score 1 · Answer 5 · answered Dec 13 '20 at 20:04

HTML code

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

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

score 0 · Answer 6 · answered Feb 24 '22 at 13:04

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

Output:

How to show and hide password when click on eye icon using jquery

6 Answers6

Linked