Tutorial Membuat Fitur Show Hide Password dengan JavaScript

Iklan Bersponsor

Membuat Fitur Show Hide Password dengan JavaScript – Secara umum, ketika kita memasukkan kata sandi akan disamarkan. Hal ini berguna untuk meningkatkan keamanan dan privasi tentunya saat mengisi password, namun adakalanya kita ingin memastikan apakah password yang telah diisi sudah benar atau belum.

Daftar Isi

Sebagai developer, mungkin ingin membuat opsi show hide password untuk meningkatkan pengalaman pengguna namun tetap mengedepankan keamanan. Nah, berikut ini adalah tutorial cara menampilkan dan menyembunyikan password pada form password menggunakan JavaScript.

Cara Membuat Fitur Show Hide Password di HTML

Untuk membuat fitur show hide password di HTML, terlebih dahulu Anda menyiapkan beberapa file yang akan kita gunakan nantinya yang diantaranya adalah sebagai berikut.

index.html digunakan untuk menampilkan form input password.
style.css digunakan untuk mempercantik tampilan form input password.
script.js digunakan untuk mengeksekusi ketika eye icon html diklik.

Setelah Anda menyiapkan ketiga file tersebut, selanjutnya silahkan ikuti langka-langkah cara menampilkan dan menyembunyikan password pada form password berikut ini.

Langkah #1: Membuat Form Password

Pada langkah pertama ini kita hanya membuat form password sebagai simulasi dari show hide password yang akan kita buat. Form input password sudah saya lengkapi dengan eye icon HTML yang apabila nanti kita klik akan berubah. Silahkan copy dan paste kode HTML berikut ke file index.html yang telah dibuat sebelumnya lalu save.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover">
    <title>Show/Hide Password with Eye Icon</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container mt-5">
      <h2>Show/Hide Password</h2>
      <form role="form">
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" class="form-control">
          <i class="fa fa-eye-slash eye-icon" id="toggle-password"></i>
        </div>
      </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Form yang telah kita buat sudah dilengkapi dengan fitur pihak ketika yaitu Bootstrap dan JQuery. Namun, kita perlu memberikan sentuhan CSS akhir agar tampilan show hide password dengan JavaScript yang telah kita buat menjadi lebih rapi.

Langkah #2: Mempercantik Form Password

Agar tampilan form password menjadi lebih rapi khususnya agar posisi eye icon HTML tepat berada di tengah pojok kanan, maka kita perlu sedikit mempercantik tampilannya dengan kode CSS berikut.

.eye-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(50%);
  cursor: pointer;
  color: #888;
  z-index: 1;
}

.eye-icon:hover {
  color: #333;
}

.form-group {
  position: relative;
}

input[type="password"], input[type="text"] {
  padding-right: 30px;
}

Silahkan copy dan pastekan kode CSS di atas ke dalam file style.css yang telah dibuat sebelumnya lalu save dan lihat hasilnya.

Langkah #3: Membuat Show/Hide Password

Pada langkah terakhir ini bertujuan agar eye icon HTML dapat berfungsi ketika pengguna melakukan klik. Oleh karena itu, kita akan membuat kode agar tujuan tersebut dapat tercapai menggunakan bantuan Jquery agar penulisan kode JavaScript menjadi lebih ringkas. Berikut adalah potongan kode show/hide password selengkapnya.

$(document).ready(function() {
  $('#toggle-password').click(function() {
    const passwordField = $('#password');
    const passwordFieldType = passwordField.attr('type');
    const eyeIcon = $(this);

    if(passwordFieldType === 'password') {
      passwordField.attr('type', 'text');
      eyeIcon.removeClass('fa-eye-slash').addClass('fa-eye');
    } else {
      passwordField.attr('type', 'password');
      eyeIcon.removeClass('fa-eye').addClass('fa-eye-slash');
    }
  });
});

Silahkan Anda copy dan pastekan kode Jquery di atas pada file script.js yang telah kita buat sebelumnya lalu jangan lupa untuk disave. Apabila semua file telah kita buat lalu jalankan dan apabila berhasil maka akan menampilkan hasil seperti gambar berikut.

Jika Anda mengalami kesulitan saat mencoba copy dan paste tutorial kali ini, Anda dapat mengunduh source code lengkapnya dengan mudah di sini. Silahkan ekstrak file tersebut lalu jalankan file index.html untuk melihat hasilnya.

Penutup

Show/Hide Password merupakan fitur yang memungkinkan pengguna untuk melihat atau menyembunyikan teks password yang mereka masukkan ke dalam input field pada formulir web, biasanya pada halaman login. Fitur ini biasanya ditambahkan untuk meningkatkan pengalaman pengguna saat memasukkan kata sandi, terutama untuk meminimalkan kesalahan ketik.

Demikian artikel pada kesempatan kali ini mengenai tutorial membuat fitur show/hide password dengan JavaScript. Sekian dari saya dan semoga bermanfaat. Selamat mencoba!