javascript dasar : cara membuat show password javascript

pernah kan kalian melihat ketika di suatu web yang ada password terus di bagian input password ada tulisan tampilkan atau bahasa inggrisnya show atau icon mata yang ketika di klik maka password tersebut akan berubah menjadi sebuah tulisan yang bisa kita baca, nah itu namanya show hide password. dan sekarang untuk kesempatan kali ini kita akan mencoba membuat show hide password dengan javascript. tapi 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 dengan kalian. dan tak lupa sholawat serta salamku akan tetap tercurah dan terpanjatkan hanya untuk junjugan baginda sayyidina Muhammad ibni Abdillah S.A.W. beserta keluarga dan para sahabatnya.

Bismillahir rohmaanir rohiim, kali ini kita akan mencoba membuat fungsi show - hide password dengan javascript yang mana seperti web-web yang ada loginnya sekarang ini. untuk membuat fitur show hide password dengan javascript pertama harus membuat form input type password dengan html. masih ingat tentang form html yang sebelumnya sudah pernah kita coba pada tulisan belajar HTML dasar-8,mengenal dan cara membuat Form pada HTML ? jika sudah lupa atau belum pernah mengikuti sebelumnya, kalian bisa membuka dan membacanya lagi pada tulisan belajar HTML dasar-8,mengenal dan cara membuat Form pada HTML . jadi untuk kode html input type password adalah kurang lebih sebagai berikut

<input type="password" name="pass" id="pass">

untuk kode html utuhnya seperti berikut kurang lebihnya

<input type="password" name="pass" id="pass"> <a href="#" id="tpl">Tampilkan Password</a>

setelah kita buat html sederhana diatas sekarang kita lanjut untuk membuat pengkondisian untuk merubah attribut html input password dengan javascript, yang mana yang akan kita ubah adalah attribut type menjadi text. jadi jika kita klik anchor id Tampilkan password maka ubah attribut type password menjadi text. dan jika kita terapkan algoritma tersebut kedalam kode javascript maka kurang lebih seperti berikut

<script>

function tplpass(){

var anch=document.getElementById("tpl");

if(anch.innerText=="Tampilkan Password"){

document.getElementById("pass").type="text";

anch.innerText="Sembunyikan Password"

}else{

document.getElementById("pass").type="password";

anch.innerText="Tampilkan Password"

}

}

</script>

dan kode html dan javascript diatas sekarang kita gabungin dan akan menjadi kode seperti berikut kurang lebihnya

<script>

function tplpass(){

var anch=document.getElementById("tpl");

if(anch.innerText=="Tampilkan Password"){

document.getElementById("pass").type="text";

anch.innerText="Sembunyikan Password"

}else{

document.getElementById("pass").type="password";

anch.innerText="Tampilkan Password"

}

}

</script>

<input type="password" name="pass" id="pass"> <a href="#" id="tpl" onclick="tplpass()">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

dan seperti itulah kurang lebihnya untuk percobaan kali ini tentang Cara Membuat Hide/Show Input Password dengan Javascript atau cara membuat show input type password javascript sederhana, dan saya rasa cukup sekian dulu tulisan kali ini tentang Cara Membuat Hide/Show Input Password dengan Javascript atau cara membuat show input type password javascript sederhana. dan kita akan lanjut di next tulisan di versi jquerynya Insya Allah. dan mudah-mudahan tulisan ini bisa memberi manfaat bagi kita semua Aamiiin. 

dan bagi kalian yang ingin download silahkan download kode diatas disini 

Salam Sobat semua

#javascript #showhide #password #html #free #share #berbagi #gratis #web #websites #website