Membuat Fitur Lihat Password Menggunakan JavaScript

Bagikan  
PIN IT! shadow

"Fitur ini sangat berguna sekali bagi orang yang takut salah ketik pada input form password"

5/5 (9)

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:

  1. Text Editor/IDE;
  2. 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.

Membuat Fitur Lihat Password Menggunakan JavaScript

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:

Membuat Fitur Lihat Password Membuat Fitur Lihat Password Menggunakan JavaScript - JADIDEWA.COM

3. Lihat Hasilnya

Setelah melakukan cara kedua, sekarang saatnya kita melihat hasilnya.

Membuat Fitur Lihat Password Membuat Fitur Lihat Password Menggunakan JavaScript - JADIDEWA.COM

Sebelum

Membuat Fitur Lihat Password Membuat Fitur Lihat Password Menggunakan JavaScript - JADIDEWA.COM

Sesudah

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.
Baca Juga :  Cara Menghitung Nilai Rata-Rata Dengan PHP

 

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

Ayo Nilai Artikel Ini!

JADIDEWA.COM

Penulis JADIDEWA.COM Serah Gue Donk!