Cara menggunakan javascript menyembunyikan gambar

Question

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

kita akan coba cara menampilkan hide password di html, ada beberapa cara, bisa menggunakan vanilla javascript dan jQuery

saat mengisi form, ada situasi dimana kita mengetik password dan ingin melihat apa yang sudah kita ketikkan, untuk melihatnya ada kotak centang yang membuat karakter terlihat

Cara menampilkan sembunyikan kata sandi dengan javascript

akan kami implementasikan menggunakan javascript, jadi saat anda mengetik akan muncul ******* dan saat anda klik checkbox maka akan muncul karakter. rahasia

Coba Skrip

<!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 dapat dibaca

sandi yang dapat dibaca

Cara menampilkan sembunyikan kata sandi dengan jQuery

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

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

kami juga menggunakan Bootstrap 5 untuk penggunaan CSS jadi lebih baik

Coba Skrip

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

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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)