setelah sebelumnya kita sudah mencoba membuat show password dengan javscript, sekarang mari kita mencoba bagaimana cara membuat show password dengan jquery atau cara bagaimana cara membuat show hide password dengan jquery. namun sebelumnya seperti biasa izinkan diri ini terlebih dahulu untuk mengucapkan
Salam sobat semua
Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan kepada diri ini sehingga diri ini bisa menulis dan berbagi dalam tulisan ini, dan tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk junjungan baginda sayyidina Muhammad ibni Abdillah S.A.W. beserta keluarga dan para sahabatnya.
Bismillahir rohmaanir rohiim, pada kesempatan ini kita akan mencoba untuk Membuat Fitur Show Password dengan jQuery setelah sebelumnya kita sudah mencoba membuat show password dengan javscript pada tulisan javascript dasar : cara membuat show password javascript . seperti biasa kita buat form input type password dulu yang kodenya kurang lebihnya seperti berikut
<input type="password" name="pass" id="pass"> <a href="#" id="tpl">Tampilkan Password</a>
setelah itu kita lanjut membuat kode jquery nya untuk dalam kondisi jika kita klik anchor tampilkan password dan jika anchor bertuliskan tampilkan password maka ubah input type password id pass menjadi input type text dan ubah tulisan anchor menjadi sembunyikan password. dan selain itu maka ubah input type text id pass menjadi input type password dan ubah tulisan anchor menjadi tampilkan password. seperti itulah kurang lebihnya untuk pengkondisian nya, dan jika kita terapkan dalam kode jquery nya kurang lebih seperti berikut
<script src="jquery.js"><script>
<script>
$(function(){
$("#tpl").click(function(){
if($("#tpl").text()=="Tampilkan Password"){
$("input[name=pass]").attr("type","text");
$("#tpl").text("Sembunyikan Password");
}else{
$("input[name=pass]").attr("type","password");
$("#tpl").text("Tampilkan Password");
}
});
});
</script>
dan sekarang lanjut gabungkan kedua kode diatas yang kurang lebihnya seperti berikut
<script src="jquery.js"></script>
<script>
$(function(){
$("#tpl").click(function(){
if($("#tpl").text()=="Tampilkan Password"){
$("input[name=pass]").attr("type","text");
$("#tpl").text("Sembunyikan Password");
}else{
$("input[name=pass]").attr("type","password");
$("#tpl").text("Tampilkan Password");
}
});
});
</script>
<input type="password" name="pass" id="pass"> <a href="#" id="tpl">Tampilkan Password</a>
maka jika kode diatas di jalankan dan ketika anchor Tampilkan Password kita klik maka input type password akan menjadi sebuah input type text yang kurang lebihnya seperti tampak pada gambar
dan jika ketika tulisan anchor berubah menjadi Sembunyikan Password dan jika kita klik maka password akan berubah tidak terlihat lagi, seperti tampak berikut
Comments
Post a Comment