Berikut artikel tentang cara membuat show/hide password menggunakan jQuery.
Dalam banyak formulir login atau pendaftaran, terdapat kolom kata sandi. Secara default, teks yang diketik di kolom ini akan disembunyikan. Namun, terkadang pengguna ingin melihat kembali kata sandi yang mereka ketik untuk memastikan tidak ada kesalahan. Fitur show/hide password yang menambahkan ikon “mata” pada kolom input adalah solusi yang elegan dan ramah pengguna.
Artikel ini akan memandu Anda membuat fitur tersebut dengan mudah menggunakan jQuery dan Font Awesome untuk ikonnya.
Persiapan Awal
Sebelum memulai, pastikan Anda telah menyertakan jQuery dan Font Awesome di dalam proyek Anda. Anda dapat menambahkannya melalui CDN (Content Delivery Network) di bagian <head> file HTML Anda.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Struktur HTML Dasar
Pertama, buat struktur HTML untuk input kata sandi. Kita akan menggunakan <div> sebagai wadah untuk input dan ikon.
<div class="password-container">
<input type="password" id="password" placeholder="Masukkan kata sandi">
<i class="fas fa-eye" id="togglePassword"></i>
</div>
Penjelasan:
div class="password-container": Wadah untuk mengelompokkan input dan ikon.input type="password": Kolom input kata sandi. Berikanid="password"agar mudah diakses dengan jQuery.i class="fas fa-eye": Ikon “mata” dari Font Awesome. Kita beriid="togglePassword"sebagai pemicu (trigger) untuk mengubah jenis input. Awalnya, kita gunakan ikon mata terbuka (fa-eye).
Styling CSS Sederhana
Agar tampilannya lebih rapi, tambahkan sedikit CSS. CSS ini akan mengatur posisi ikon mata agar berada di dalam input dan terlihat menarik.
.password-container {
position: relative;
width: 300px; /* Sesuaikan lebar sesuai kebutuhan */
}
.password-container input {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.password-container i {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
Penjelasan:
.password-container: Mengatur posisi relatif agar ikon di dalamnya bisa diposisikan secara absolut.i(ikon): Mengatur posisi ikon agar berada 10px dari kanan, di tengah secara vertikal (top: 50%dantransform: translateY(-50%)).cursor: pointerakan mengubah kursor menjadi tangan ketika diarahkan ke ikon.
Logika jQuery
Bagian ini adalah intinya. Kita akan menggunakan jQuery untuk menangani klik pada ikon dan mengubah type dari input kata sandi.
$(document).ready(function() {
const togglePassword = $('#togglePassword');
const passwordInput = $('#password');
togglePassword.on('click', function() {
// Memeriksa tipe input
const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
// Mengubah tipe input
passwordInput.attr('type', type);
// Mengubah kelas ikon (fa-eye menjadi fa-eye-slash dan sebaliknya)
this.classList.toggle('fa-eye-slash');
});
});
Penjelasan:
$(document).ready(function() { ... });: Pastikan kode jQuery berjalan setelah seluruh dokumen HTML dimuat.const togglePassword = $('#togglePassword');: Mengambil elemen ikon dengan idtogglePassword.const passwordInput = $('#password');: Mengambil elemen input kata sandi dengan idpassword.togglePassword.on('click', function() { ... });: Menambahkan event listenerclickpada ikon.const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';: Ini adalah operator ternary. Fungsinya:- Jika tipe input saat ini adalah
password, variabeltypeakan diisitext. - Jika tidak (berarti
text), variabeltypeakan diisipassword.
- Jika tipe input saat ini adalah
passwordInput.attr('type', type);: Mengubah atributtypedari input sesuai dengan nilai variabeltype.this.classList.toggle('fa-eye-slash');: MenggunakanclassList.toggle()untuk secara otomatis menambahkan atau menghapus kelasfa-eye-slash(ikon mata dicoret) pada elemen ikon. Ini akan mengubah ikon dari mata terbuka menjadi mata tertutup, dan sebaliknya, setiap kali diklik.
Dengan langkah-langkah di atas, Anda telah berhasil membuat fitur show/hide password yang interaktif, fungsional, dan ramah pengguna di situs web Anda. Semoga artikel ini bermanfaat!
