Toggle Password Visibility using Javascript

Submitted by nurhodelta_17 on Saturday, January 20, 2018 - 11:40.
This is the step by step procedure:

Step 1 : 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">

Step 2 : Add Style

Include the following style.
  1. <style type="text/css">
  2.         #myInput{
  3.                 font-size: 1em;
  4.                 padding: 1em;
  5.         }
  6. </style>

Step 3 : Create the Input

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

Step 4 : Adding our Script

Last step is to add our javascript code.
  1. function showPass() {
  2.         var icon = document.getElementById('icon');
  3.         var txt = document.getElementById('btnText');
  4.         var btn = document.getElementById('showBtn');
  5.         var x = document.getElementById('myInput');
  6.         if (x.type === 'password') {
  7.             x.type = 'text';
  8.             btn.className = 'btn btn-default';
  9.             txt.innerHTML = 'Hide';
  10.              icon.className = 'fa fa-eye-slash';
  11.          } else {
  12.              x.type = 'password';
  13.              btn.className = 'btn btn-primary';
  14.               txt.innerHTML = 'Show';
  15.               icon.className = 'fa fa-eye';
  16.          }
  17. }

Full HTML

  1. <!DOCTYPE html>
  4.         <meta charset="utf-8">
  5.         <title>Toggle Password Visibility using Javascript</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.         <style type="text/css">
  9.                 #myInput{
  10.                         font-size: 1em;
  11.                         padding: 1em;
  12.                 }
  13.         </style>
  14. </head>
  16. <div class="container">
  17.         <h1 class="page-header text-center">Toggle Password Visibility using Javascript</h1>
  18.         <div class="row">
  19.                 <div class="col-sm-4 col-sm-offset-4">
  20.                         <input type="password" id="myInput"> <button type="button" class="btn btn-primary" onclick="showPass()" id="showBtn"><i class="fa fa-eye" id="icon"></i> <span id="btnText">Show</span></button>               
  21.                 </div>
  22.         </div>
  23. </div>
  24. <script type="text/javascript">
  25.         function showPass() {
  26.                 var icon = document.getElementById('icon');
  27.                 var txt = document.getElementById('btnText');
  28.                 var btn = document.getElementById('showBtn');
  29.             var x = document.getElementById('myInput');
  30.             if (x.type === 'password') {
  31.                 x.type = 'text';
  32.                 btn.className = 'btn btn-default';
  33.                 txt.innerHTML = 'Hide';
  34.                 icon.className = 'fa fa-eye-slash';
  35.             } else {
  36.                 x.type = 'password';
  37.                 btn.className = 'btn btn-primary';
  38.                  txt.innerHTML = 'Show';
  39.                  icon.className = 'fa fa-eye';
  40.             }
  41.         }
  43. </body>
  44. </html>
Tags
Javascript
Password
show password
hide password
password visibility
input password

Add new comment

About text formats
  • 125 views