Cara Membuat Toggle Password Visibility

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 4, 2021

Di bawah ini kita akan mempelajari cara membuat toggle password visibility dengan menggunakan JavaScript. Toggle Password Visibility dapat digunakan agar pengguna bisa melihat tulisan yang tersembunyi. Berikut ini contoh toggle password visibility yang akan kita pelajari :

<!DOCTYPE html>
<html>
<body>

<p>Klik checkbox di bawah field password untuk melihat kata sandi:</p>

Password: <input type="password" value="FakePSW" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Lihat Password

<script>
function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

</body>
</html>

Toggle Password Visibility

Langkah 1) Tambahkan HTML:
Contoh

<!-- Field Password  -->
Password: <input type="password" value="FakePSW" id="myInput">

<!-- Elemen untuk melihat password -->
<input type="checkbox" onclick="myFunction()">Show Password

Langkah 2) Tambahkan JavaScript:
Contoh

function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}