Bagaimana Cara Menampilkan Password

APPKALSEL.com | Developer Aplikasi Kalimantan Selatan | Assalamu’alaikum Wr.Wb.

Form Input dengan Type=”password” memang dibuat untuk menyembunyikan password. Namun dalam beberapa keadaan, Pengguna (User) boleh merasa kurang yakin dengan password yang telah dia tulis. Dalam kasus seperti ini, maka diperlukan opsi untuk menampilkan password bagi Pengguna (User). Bukan untuk melemahkan aspek keamanan (security) atau membuka privasi Pengguna (User), –karena keamanan dari teks password adalah tanggung jawab Pengguna (User)–, melainkan untuk mengatasi masalah di sisi Pengguna (User) yang merasa kurang yakin dengan password yang telah dia tulis tersebut.

“Atas dasar itu pula, pada hampir semua Aplikasi yang telah dikembangkan oleh ORCA TECH selalu menerapkan Trik Javascript ini di halaman login Aplikasi”.

<!-- Bagaimana Cara Menampilkan Password -->
<form>
<input type="password" name="password" />
</form>

Javascript yang digunakan dalam Trik ini memanfaatkan Input Type=”checkbox” dengan class=”show-password”. Jika Input Checkbox ini dicentang, maka dia akan mengganti Tipe=”password” menjadi “text” pada Input dengan Class=”password”.

Untuk menjalankan logika tersebut di atas, maka kita perlu sedikit memodifikasi Form Input dengan menambahkan Class=”password” pada Form Input Password, dan Class=”show-password” pada Form Input Checkbox, seperti berikut: 

<!-- Bagaimana Cara Menampilkan Password -->
<form>
     <input type="password" name="password" class="password" />
     <input type="checkbox" class="show-password" id="show-password">
</form>

Langkah selanjutnya, untuk menjalankan Trik Javascript Menampilkan Password ini, adalah menambahkan beberapa baris kode Javascript seperti berikut.

<script type="text/javascript">
$(document).ready(function(){		
	$('.show-password').click(function(){
		if($(this).is(':checked')){
			$('.password').attr('type','text');
		}else{
			$('.password').attr('type','password');
		}
	});
});
</script>

Implementasi

Penerapan Trik Javascript Menampilkan Password ini dapat dilihat di Link DEMO. Anda juga dapat mencoba sendiri Trik Javascript Menampilkan Password ini dengan mengunduh Source Code di Link DOWNLOAD

DEMO
DOWNLOAD

Untuk membuat Tampilan (User Interface) yang lebih menarik pada Trik Javascript Menampilkan Password ini, anda dapat memainkan Trik CSS sesuai keinginan anda. Untuk referensi, kami juga membagikan beberapa Trik CSS yang mungkin menarik untuk anda.

Penjelasan

Maaf! Saya tidak menberikan penjelasan secara detail tentang Trik Javascript Menampilkan Password ini. Kita dapat membahasnya sama-sama di Kolom Komentar.