Cara show hide password pada Html

pada tutorial membuat input password html ketika kita memasukan teks akan menjadi karakter bintang (*) atau (•) tergantung browser yang kita gunakan.

kita akan mencoba cara show hide password pada html, ada beberapa cara, bisa menggunakan vanilla javascript dan jQuery.

saat mengisi formulir, ada situasi dimana kita mengetik kata sandi dan ingin melihat apa yang telah kita ketik, untuk melihatnya ada kotak centang yang membuat karakter terlihat.

Cara show hide password dengan javascript

kita akan mengimplementasikan menggunakan javascript, jadi saat mengetik akan muncul ******* dan saat klik checkbox maka akan muncul karakter : rahasia

<!DOCTYPE html>
<html>
<head>
    <title> show password dengan javascript </title>
</head>
<body>

    <p>
        klik checkbox tampilkan password untuk melihat kata sandi
    </p>

    Password: <input type="password" value="rahasia" id="inputPassword">
    <br><br>
    <input type="checkbox" onclick="myFunction()">Tampilkan Password

    <script>
        function myFunction() {
            var x = document.getElementById("inputPassword");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>

</body>
</html>Code language: HTML, XML (xml)

tampilan kata sandi tersembunyi atau tidak bisa dibaca :

kata sandi yang bisa dibaca :

Cara show hide password dengan jQuery

menampilkan dan menyembunyikan password menggunakan jQuery, fitur ini biasanya terdapat pada form login pada sebuah halaman web.

fitur show hide password walaupun bisa menggunakan javascript, namun lebih mudah jika kita sudah menggunakan library jQuery

kita juga menggunakan Bootstrap 5 untuk penggunaan CSS supaya lebih bagus.

<!DOCTYPE html>
<html>
<head>
    <title>Cara show hide password dengan jquery</title>

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="mb-3 row">
            <label for="inputUsername" class="col-sm-2 col-form-label">Username</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputUsername" value="thohirdev">
            </div>
        </div>
        <div class="mb-3 row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" value="rahasia">
            </div>
        </div>
        <div class="mb-3 row">
            <div class="col-sm-10 offset-2">
                <input type="checkbox" class="form-check-input" id="show-password"> Tampilkan Password
            </div>
        </div>

    </div>

    <!-- jquery 3.5.1 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#show-password').click(function() {
                if ($(this).is(':checked')) {
                    $('#inputPassword').attr('type', 'text');
                } else {
                    $('#inputPassword').attr('type', 'password');
                }
            });
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)