Cara Membuat Show Password Menggunakan Javascript

Halo teman-teman pada tutorial kali ini saya akan membahas tentang Cara Membuat Show Password Menggunakan Javascript, show password merupakan sebuah alat bantu atau sebuah fitur yang berfungsi untuk memunculkan sebuah karakter yang terdapat didalam form password, karakter tersebut yang tampil dapat berupa bintang atau titik yang tebal, jadi fungsi dari Show password ini yaitu untuk menampilkan isi dari form tersebut, sehingga ketika user ingin melakukan login ataupun register pada sebuah form tidak terjadi kesalahan inputan pada password tersebut.Alur kerja dari show password ini yaitu dimana pada saat kita ingin mengetahui bahwa password yang kita masukan benar atau tidak, kita dapat mengklik pada show password, maka karakter yang terdapat pada form tersebut akan ditampilkan.
Nah biar teman-teman lebih paham lagi tentang show password kita langsung saja masuk ke study casenya tentang Cara Membuat Show Password Menggunakan Javascript.
langkah pertama Cara Membuat Show Password Menggunakan Javascript, silahkan teman-teman buka text editornya, jika sudah silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Show Password Menggunakan Javascript</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
  <p>Cara Membuat Show Password Menggunakan Javascript</p>
  <input class="active" type="text" placeholder="username">

  <div class="satu">
   <input type="password" class="active" id="pswd" placeholder="Masukan Password">
     <div class="group1">
       <input type="checkbox" id="chk">
       <label id="showhide" class="label">Show Password</label>
     </div>
  </div>

    <div class="dua">
     <input class="active" type="password" id="pswd2" placeholder="Ulangi Password">
     <div class="group">
      <i id="icon" class="fa fa-eye-slash"></i>
     </div>
    </div>
</div>
    <script src="show.js"></script>
</body>
</html>

langkah berikutnya kita akan membuat file JavaScriptnya dan silahkan teman-teman simpan script dibawah ini dengan nama show.js

// proses 1
var masukanpass = document.getElementById('pswd'),
      chk  = document.getElementById('chk'),
      label = document.getElementById('showhide');


     chk.onclick = function () {

      if(chk.checked) {

           masukanpass.setAttribute('type', 'text');
           label.textContent = 'Hide Passowrd';
       } else {

           masukanpass.setAttribute('type', 'password');
           label.textContent = 'Show Passowrd';
       }
 
     }

// proses 2
var input = document.getElementById('pswd2'),
    icon = document.getElementById('icon');

   icon.onclick = function () {

     if(input.className == 'active') {
        input.setAttribute('type', 'text');
        icon.className = 'fa fa-eye';
       input.className = '';

     } else {
        input.setAttribute('type', 'password');
        icon.className = 'fa fa-eye-slash';
       input.className = 'active';
    }

   }

langkah yang terakhir kita akan membuat style nya, dan silahkan teman-teman simpan script dibawah ini dengan nama style.css

    * {
    margin: 0;
    padding: 0;}
 
    body {
    background: #90C59A;
}

    .container {
    width: 350px;
    margin:10px auto;
    padding: 30px;
    background: #40E8F5;
    border-radius: 5px;
    border: 1px solid #c5c4c4;
    color: #5a5757;
}

p {font-size: 20px; text-align: center;}
.active, input[type='text'] {width: 350px;
        height: 35px;
        margin: 10px 0 0 0;}

.group {position: relative;}
.fa {position: absolute;
    bottom: 12px;
    float: right;
    left: 324px;
    cursor: pointer;
}

selanjutnya silahkan di save semua file nya, jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini

Silahkan Klik untuk Demo

Bagai mana teman-teman cukup mudah bukan Cara Membuat Show Password Menggunakan Javascript-nya, sekian dulu tutorial saya kal ini tentang Cara Membuat Show Password Menggunakan Javascript.
Semoga bermanfaat
Terimakasih.

Cara Membuat Show Password Menggunakan Javascript

Kategori