Toggle Password Visibility using jQuery

Submitted by nurhodelta_17 on Saturday, January 20, 2018 - 14:25.
This is the step by step procedure in this tutorial:

Add dependency

In the header portion of your HTML, add the following:
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Add style

Include the following style.
  1. #myInput{
  2.         font-size: 1em;
  3.         padding: 1em;
  4. }

Add the Input

Next, we create our input type.
  1. <input type="password" id="myInput"> <button type="button" class="btn btn-primary" id="showBtn"><i class="fa fa-eye" id="icon"></i> <span id="btnText">Show</span></button>

Adding our jQuery Script

Last step is to add our jquery script.
  1. $(document).ready(function(){
  2.         $('#showBtn').click(function(){
  3.                 var type = $('#myInput').attr('type');
  4.                 if(type == 'password'){
  5.                         $('#myInput').attr('type', 'text');
  6.                         $('#btnText').text('Hide');
  7.                         $('#showBtn').removeClass('btn-primary').addClass('btn-default');
  8.                         $('#icon').removeClass('fa-eye').addClass('fa-eye-slash');
  9.                 }
  10.                 else{
  11.                         $('#myInput').attr('type', 'password');
  12.                         $('#btnText').text('Show');
  13.                         $('#showBtn').removeClass('btn-default').addClass('btn-primary');
  14.                         $('#icon').removeClass('fa-eye-slash').addClass('fa-eye');
  15.                 }
  16.         });
  17. });

Full HTML

  1. <!DOCTYPE html>
  4.         <meta charset="utf-8">
  5.         <title>Toggle Password Visibility using jQuery</title>
  6.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  8.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  9.         <style type="text/css">
  10.                 #myInput{
  11.                         font-size: 1em;
  12.                         padding: 1em;
  13.                 }
  14.         </style>
  15. </head>
  17. <div class="container">
  18.         <h1 class="page-header text-center">Toggle Password Visibility using jQuery</h1>
  19.         <div class="row">
  20.                 <div class="col-sm-4 col-sm-offset-4">
  21.                         <input type="password" id="myInput"> <button type="button" class="btn btn-primary" id="showBtn"><i class="fa fa-eye" id="icon"></i> <span id="btnText">Show</span></button>            
  22.                 </div>
  23.         </div>
  24. </div>
  25. <script type="text/javascript">
  26.         $(document).ready(function(){
  27.                 $('#showBtn').click(function(){
  28.                         var type = $('#myInput').attr('type');
  29.                         if(type == 'password'){
  30.                                 $('#myInput').attr('type', 'text');
  31.                                 $('#btnText').text('Hide');
  32.                                 $('#showBtn').removeClass('btn-primary').addClass('btn-default');
  33.                                 $('#icon').removeClass('fa-eye').addClass('fa-eye-slash');
  34.                         }
  35.                         else{
  36.                                 $('#myInput').attr('type', 'password');
  37.                                 $('#btnText').text('Show');
  38.                                 $('#showBtn').removeClass('btn-default').addClass('btn-primary');
  39.                                 $('#icon').removeClass('fa-eye-slash').addClass('fa-eye');
  40.                         }
  41.                 });
  42.         });
  44. </body>
  45. </html>
That ends this tutorial. Happy Coding :)
Tags
jQuery
Javascript
Password
input password
password visibility
show password

Add new comment

About text formats
  • 87 views