Membuat Fungsi Show - Hide Password dengan Javascript

Membuat Fungsi Show - Hide Password dengan Javascript - Show password merupakan suatu fitur diamana kita bisa melihat karakter yang diketikan ketika melakukan register atau login pada sebuah aplikasi. Tentu ini akan sangat membantu sekali ketika akan melakukan proses mengulang ketikan kata sandi atau ingin memastikan password yang diketikan telah benar dan sesuai. Nah, pada kesempatan kali ini saya akan mencoba Membuat Fungsi Show - Hide Password dengan Javascript, jika kalian ingin membuat tapi belum tau bagaimana caranya, tidak ada salahnya untuk mengikuti langakah - langkahnya berikut ini.

Langkah 1: Membuat Fungsi Show - Hide Password dengan Javascript

Baik, kita mulai dengan langkah pertama dengan membuat file index.html, dan menyusun struktur sederhana untuk membuat form dari inputan password dengan sintak HTML berikut ini.

<body>
    <form>
        <div>
            <input type="password" id="pass" name="pass" />
        </div>
        <div>
            <input type="checkbox" id="show-pass" name="show-pass"/>
            <label for="show-pass">Show password</label>
        </div>
    </form>    
</body>

Langkah 2: Membuat Fungsi Show - Hide Password dengan Javascript

Selanjutnya, kalian bisa menambahkan sintak CSS untuk mengatur jarak dan antar elemen inputan. Tentu kalian bisa bebas desain lebih menarik lagi untuk inputannya.

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    color: #333;
    font-family: 'Roboto', sans-serif;
}
form { margin: 1em; }
form *:focus { outline-style: none; }
form div { margin-bottom: 0.5em; }
form #pass {
    width: 200px;
    padding: 0.3em;
    border: 1px solid #ddd;
    background: #fff;
}

Langkah 3: Membuat Fungsi Show - Hide Password dengan Javascript

Langkah terakhir, ini merupakan langkah yang paling utama untuk menjalankan fungsi show dan hide passwordnya, yakni kita akan menambahkan sintak javascript, ketikan perintah javascript dibawah tag body

<script>
(function() {
    var _show = function( element, field ) {
        this.element = element;
        this.field = field;
        this.toggle();    
    };
    _show.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-pass" ),
            pass = document.querySelector( "#pass" ),
            _form = document.querySelector( "form" );
            var toggler = new _show( checkbox, pass );
    });
})();
</script>

Setelah semua sintak diatas telah diketikan semua, silahkan kalian simpan filenya, kemudian buka pada browser masing - masing dan lihat hasilnya, maka ketikan kalian menetikan sesuatu didalam form dan ingin melihat apa yang diketikan, kalian tinggal centang pada bagian checkbox maka akan terlihat isi dari inputan yang diketikan.

Bagaimana, cukup mudah bukan untuk Membuat Fungsi Show - Hide Password dengan Javascript ? Baik, cukup sekian tutorial kali ini, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

18 Maret 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat