jQuery

Show Hide Password

   September 1, 2018 by Subrata Chakraborty
  • ★
  • ★
  • ★
  • ★
  • ★
    • Favourite
Average Star Rating is 3 from the Total 8 Ratings


Copy & Try this code at phpfiddle.org

show_pass

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <title>Show / Hide password</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script   src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
      .main{
          position:relative;
          height:50px;
          padding:15px;
          width:300px;
      }
      #show{
        position: absolute;
        left: 215px;
        top:18px;
        z-index: 2;
        cursor:pointer;
      }    
      
      #show:hover{
        color:green;
      }
  </style>
</head>
<body>
  <h1>Show / Hide Password</h1>
  <div class="main">
  <label for="password"> Password </label>
  <input style="width:150px;" type="password" id="password" value="NowYouSeeMe!!"/>
  <span id="show" class="fa fa-eye-slash"> </span>
</div>
<script>
$(function() {

$("#show").on("click",function(){
  var x = $("#password");
  if (x.attr('type') === "password") {
        x.attr('type','text');
        $(this).removeClass('fa fa-eye-slash')
        $(this).addClass('fa fa-eye')
    } else {
        x.attr('type','password');
        $(this).removeClass('fa fa-eye')
        $(this).addClass('fa fa-eye-slash')
  } // End of if
})// End of click event

});
</script>
</body>
</html>

  


user profile image
Martina Carluccio wrote.
On February 13, 2019

Hey this is great!

user profile image
Subrata Chakraborty wrote.
On February 13, 2019

Thank you, Martina!

Learn web development

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Archives