Membuat Fitur Show Password dengan jQuery

Tutorial - 17 Mar 2013

Fitur show password ialah fitur untuk menampilkan password ketika akan diisikan di textbox password. Fitur ini digunakan untuk memudahkan user ketika akan mengetikkan password baik di form login register ataupun ubah password. Untuk membuat fitur show password ini, kita akan memanfaatkan plugin jQuery.

Membuat Fitur Show Password dengan jQuery

Langkah 1 – Buatlah Isian Password

Buatlah isian password menggunakan tag HTML. Pada contoh ini kita akan membuat isian form login.

<div id="form">
<p><label>Username</label><br />
<input type="text" name="username" id="username" /></p>

<label>Password</label><br />
<input type="password" name="password" id="password" class="tampilkanpassword" /><br class="show" />

<p>
<input type="button" value="Login" />
</p>
</div>

Langkah 2 – jQuery

Selanjutnya, ketikkan syntax jQuery untuk menjalankan fitur show password.

$(function(){
$(".tampilkanpassword").each(function(index,input) {
var $input = $(input);
$(‘<label class="labeltampilkanpassword"/>’).append(
$("<input type=’checkbox’ class=’labeltampilkanpassword’ />").click(function() {
var change = $(this).is(":checked") ? "text" : "password";
var rep = $("<input type=’" + change + "’ />")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr(‘class’, $input.attr(‘class’))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
).append($("<span/>").text("Tampilkan Password")).insertAfter(".show");
});
});

Selamat mencoba dan berkreasi.