Logo
Hidden Show Password

Cara Coding Fitur Show Hide Password Login dengan JavaScript & Boostrap 5

  • Coding
  • Alfin Ardiansyah
  • 15 Aug 2024

Fitur show/hide password merupakan salah satu elemen yang sering digunakan dalam form login atau form register dalam suatu website untuk memudahkan pengguna melihat dan memverifikasi kata sandi yang mereka masukkan. 

Fungsi Fitur Hide & Show Password?

Fitur ini berfungsi untuk meminimalisir kesalahan user dalam memasukan password karena tidak bisa melihat karakter yang diinputkan. Dengan fitur ini user dapat melihat karakter yang mereka masukan ke dalam form password agar user tahu apakah karakter yang mereka inputkan benar atau bekym.

Cara Membuat Fitur Hide & Show Password?

Untuk membuat fitur hide & show password ini dapat dilakukan dengan beberapa cara, salah satunya dengan penambahan jquery, atau vanilla Javascript berikut cara membuatnya.

Membuat Form tampilan login

Pertama-tama, buat struktur HTML untuk input password dan tombol show/hide. Berikut contoh kodenya:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- icon -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <title>Show Hide Password</title>
</head>

<body>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-5">
                <div class="card">
                    <div class="card-body">
                        <h2 class="text-center mb-3">Login</h2>
                        <div class="form-group mb-3">
                            <div class="mb-3">
                                <input type="text" name="username" id="username" placeholder="Insert Username"
                                    class="form-control">
                            </div>
                            <div class="input-group mb-3">
                                <input type="password" id="password" class="form-control" placeholder="Insert Password"
                                    aria-label="Insert Password" aria-describedby="basic-addon2">
                                <span class="input-group-text" id="showHide">
                                    <i class="bi bi-eye"></i>
                                </span>
                            </div>
                            <div class="mb-3 d-grid gap-2">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div>
                                Lupa password akun? <a href="#" class="text-decoration-none">Lupa password</a>
                            </div>
                            <div>
                                Belum punya akun? <a href="#" class="text-decoration-none">Buat Akun</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./script.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

Hasil Tampillan :

Menambahkan Javascript untuk fungsi Show & Hidden Password 
script.js

const password = document.getElementById('password'); // id dari input password
const showHide = document.getElementById('showHide'); // id span showHide dalam input group password

password.type = 'password'; // set type input password menjadi password
showHide.innerHTML = '<i class="bi bi-eye"></i>'; // masukan icon eye dalam icon bootstrap 5
showHide.style.cursor = 'pointer'; // ubah cursor menjadi pointer
// jadi ketika span di hover maka cursornya berubah pointer

showHide.addEventListener('click', () => {
// ketika span diclick
    if (password.type === 'password') {
        // jika type inputnya password
        password.type = 'text'; // ubah type menjadi text
        showHide.innerHTML = '<i class="bi bi-eye-slash"></i>'; // ubah icon menjadi eye slash
    } else {
        // jika type bukan password (text)
        showHide.innerHTML = '<i class="bi bi-eye"></i>'; // ubah icon menjadi eye
        password.type = 'password'; // ubah type menjadi password
    }
});

 

Itu dia tutorial cara membuat fitur Show Hidden password dengan tambahan Javascript  dan bootstrap 5, ikuti terus RuangBacaku untuk mendapatkan info artikel terbaru lainya.