Tampil dan Sembunyikan Password dengan Jquery

Tampil dan Sembunyikan Password dengan Jquery - Hai bro, hari ini mau berbagi tips programming, terkadang teknik ini di perlukan walaupun b...

Tampil dan Sembunyikan Password dengan Jquery - Hai bro, hari ini mau berbagi tips programming, terkadang teknik ini di perlukan walaupun bukan hal wajib dalam aplikasi, namun beberapa aplikasi menggunakannya untuk memudahkan user terutama user seperti saya yang selalu lupa sudah memasukan password apa dalam field, karena biasanya field password akan selalu keliatan titik titik bisa juga isinya sepeti ini xxxx, hal tersebut dikarenakan field tersebut bertipe password dan makanya dia ga nampil.

Nah berikut ini saya mau mencoba dengan membuat tombol khusu untuk bisa melihat password, namun kali ini kita butuh bantuan library javascript yang ampuh, apalagi kalau bukan jquery, ok bro langsung aja berikut syntaxnya :

Contoh script HTML Sederhana :

<input type="password" class="password" value="" />
<button class="lihat-pass show-password">Lihat Password</button>

Contoh Jquery Syntax Sederhana (masukan sebelum tag ):

$(document).ready(function(){
    $('.lihat-pass').on('click',function(){
        var box = $(this);
        if(box.hasClass('show-password')){
            $('.password').attr('type','text');
            box.addClass('hiding-password').removeClass('show-password');
            box.text('Sembunyikan Password');
        }else if(box.hasClass('hiding-password')){
            $('.password').attr('type','password');
            box.addClass('show-password').removeClass('hiding-password');
            box.text('Lihat Password');
        }else{
          //
        }
    });
});

Nah itu saja dulu ya, kalau mau coba kamu bisa klik demo di bawah ini dan melihat langsung syntax sourcenya. Terima kasih dan jangan lupa komentarnya ya.

[DEMO]