jQuery

Show Hide Password

  
  • Favourite
Average Star Rating is 5 from the Total 7 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
On February 13, 2019

Hey this is great!

user profile image
On February 13, 2019

Thank you, Martina!