"Fitur ini sangat berguna sekali bagi orang yang takut salah ketik pada input form password" #Hide Password #Javascript #Membuat Fitur Lihat Password Menggunakan JavaScript #Show Password
Membuat Fitur Lihat Password Menggunakan JavaScript
Fitur Lihat Password atau biasanya dikenal dengan Show Password merupakan sebuah fitur yang dapat melihat password yang sedang diketik pada input form password.
Fitur ini sangat berguna sekali bagi orang yang takut salah ketik pada input form password. Karena pada input form password, kita tidak bisa melihat karakter apa yang sedang diketik karena otomatis akan terubah menjadi simbol bintang/bulat hitam.
Karena begitu pentingnya fitur seperti ini, fitur ini juga banyak digunakan pada website populer seperti facebook, twitter, gmail, dll.
Maka dari itu, kali ini admin akan membagikan tutorial seputar Membuat Fitur Lihat Password Menggunakan JavaScript. Berikut adalah caranya!
Persiapan
Ada beberapa persiapan yang mesti dilakukan, diantaranya:
- Text Editor/IDE;
- Browser;
Setelah menyelesaikan persiapan, lanjut ke proses koding!
Proses
Proses koding yang dilakukan hanya sedikit saja, tapi semoga kamu memahami isi dari kodingnya.
1. Buat File index.html atau php
File ini berfungsi sebagai tampilan halaman form password.
2. Buat File show.js
Disini kita akan menggunakan javascript secara external agar koding di bagian file index terlihat lebih rapih dan sedikit. Semakin sedikit sebuah baris koding, maka akan semakin cepat juga waktu ekseskusinya.
Taruh file tersebut pada bagian atas </body>
. Contohnya Adalah seperti ini:
3. Lihat Hasilnya
Setelah melakukan cara kedua, sekarang saatnya kita melihat hasilnya.
Akhirnya selesai juga untuk Membuat Fitur Lihat Password Menggunakan JavaScript.
Penjelasan
function lihat() | Membuat fungsi pada attribut onclick di tag button. |
var password = document.getElementById(‘password’) | Mengambil id pada input form password. |
button = document.getElementsByTagName(‘button’)[0]; | Mengambil Tag Button, kenapa nilai 0? ketika di klik maka tidak ada reload. |
if(button.textContent === ‘Lihat Password’) | Kondisi dimana type=password. |
password.setAttribute(‘type’, ‘text’); | Berubah menjadi type=text. |
button.textContent = ‘Sembunyikan’; | Kondisi dimana type=text. |
password.setAttribute(‘type’, ‘password’); | merubah kembali dari type=text menjadi type=password. |
button.textContent = ‘Lihat Password’; | Kondisi dimana type=password. |
return false; | element DOM. Agar terjadi reload. |
Agar desain lebih bagus, admin menyarankan untuk menggunakan framework css seperti bootstrap/materialize/semantic/dll.
Penutup
Sekian artikel kali ini, semoga membantu untuk kamu yang sedang membutuhkannya 😀
Terima kasih,
JADIDEWA.COM