Cara Membuat Show Hide Password dengan Javascript

Cara Membuat Show Hide Password dengan Javascript - Fitur show dan hide password biasanya bisa kita temui pada halaman login suatu website, fitur ini sangatlah penting dan juga membantu agar password yang dimasukan tepat dan benar. Nah, pada kesempatan kali ini saya akan bagikan tutorial bagaimana membuat fitur show dan hide password pada halaman login dengan menggunakan Javascript. Pasti kalian penasaran yah bagaimana cara membuatnya ? Langsung saja simak langkah - langkah Cara Membuat Show Hide Password dengan Javascript berikut ini.

Langkah 1 : Cara Membuat Show Hide Password dengan Javascript

Baiklah kita mulai langkah pertama dengan membuat desain halaman login terlebih dahulu, untuk itu silahkan kalian buat satu file index.html kemudian ketikan sintak HTML sebagai struktur awal dan membuat form login seperti berikut.

<body>
    <form action="" method="post" id="form">
        <input type="text" id="username" placeholder="Username" /><br><br>
        <input type="password" id="password" placeholder="Password" />
        <div>
            <input type="checkbox" id="show-hide" name="show-hide" value="" />
            <label for="show-hide">Show password</label>
        </div>
        <p><input type="submit" value="Login" /></p>
    </form>    
</body>

Langkah 2 : Cara Membuat Show Hide Password dengan Javascript

Langkah selanjutnya, setelah membuat form login seperti diatas, kita akan mendesain sedikit tampilan formnya agar terlihat rapi dengan menambahkan menambahkan style CSS seperti berikut.

#password, #username {
    width: 200px;
    padding: 8px;
    border: 1px solid #ddd;
}
input[type="submit"] {
    padding: 5px;
    width: 80px;
    border: 1px solid #ddd;
}

Langkah 3 : Cara Membuat Show Hide Password dengan Javascript

Setelah desain telah jadi, langkah selanjutnya kita akan membuat fitur show dan hide password pada form berfungsi dengan baik kita tambahkan sintak Javascript berikut ini.

<script>
    (function() {
    
        var showHide = function( element, field ) {
            this.element = element;
            this.field = field;
            
            this.toggle();    
        };
        
        showHide.prototype = {
            toggle: function() {
                var self = this;
                self.element.addEventListener( "change", function() {
                    if(self.element.checked) {self.field.setAttribute( "type", "text" );}
                    else {self.field.setAttribute( "type", "password" );}
                }, false);
            }
        };
        
        document.addEventListener( "DOMContentLoaded", function() {
            var checkbox = document.querySelector( "#show-hide" ),
                password = document.querySelector( "#password" ),
                form = document.querySelector( "#form" );
                
                form.addEventListener( "submit", function( e ) {
                    e.preventDefault();
                }, false);
                
                var toggler = new showHide( checkbox, password );
        });
        
    })();
</script>

Setelah semua sintak telah diketikan semua, silahkan simpan kembali filenya kemudian buka pada browser masing - masing dan lihat hasilnya, jika kalian ketikan pada kolom password dan mencentang chekboxnya maka password akan terlihat.

Baiklah, cukup sekian tutorial mengenai bagaimana Cara Membuat Show Hide Password dengan Javascript, semoga tutorial ini bisa bermanfaat buat kalian selamat mencoba dan sampai jumpa pada tutorial selanjutnya :)

22 Juli 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat