Bagaimana Cara Membuat Tombol Show Password di PHP?

Dibuat
·
Dilihat28 kali
0

Saya ingin membuat tombol show password seperti situs-situs yang menyediakan fitur login pada umumnya, bagaimana caranya ya?

Ini sampel kode yang saya gunakan:

// index.php

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
  <div>
    <label for="password">Password</label>
    <input type="password">
    <button type="button">Show Password</button>
  </div>
</body>
</html>
PHPHTML
1 Jawaban
0

Tombol show password biasanya dibuat sepenuhnya pakai JavaScript tidak memerlukan PHP meskipun file yang dieksekusi adalah file .php.

Sederhananya, ini dilakukan dengan mengubah atribut type dari password ke text untuk menampilkan, atau text ke password untuk menyembunyikan.

Untuk memudahkan menyeleksi elemen dengan JavaScript tambahkan atribut class ke input dan button, kemudian pasang listener click ke tombol lalu gunakan logika yang sudah dijelaskan.

Jadinya seperti ini:

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
  <div>
    <label for="password">Password</label>
    <input class="input-password" type="password">
    <button type="button" class="btn-show-password">Show Password</button>
  </div>

  <script>
    const passwordInput = document.querySelector('.input-password');
    const btnShowPassword = document.querySelector('.btn-show-password');
    
    btnShowPassword.addEventListener('click', () => {
      const currentInputType = passwordInput.getAttribute('type');

      if(currentInputType === "password") {
        passwordInput.setAttribute('type', 'text');
      } else {
        passwordInput.setAttribute('type', 'password');
      }
    })
  </script>
</body>
</html>
Dibuat

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait