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.
<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.
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
(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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
