How To

Cara Membuat Toggle Password Visibility

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" >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" >

Langkah 2) Tambahkan JavaScript:
Contoh

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

Hanifah Nurbaeti

Share
Tags: formHow To