Javascript Şifre Göster/Gizle Yapımı

Son zamanlarda mobil uygulamlarda ve web’de sıkça rastladığımız şifre göster gizle olayını basit bir şekilde html ve javascript kullanarak nasıl yapabiliriz onu göreceğiz.

Javascript Şifre Göster/Gizle Yapımı

Email ve şifre alanlarının yer aldığı basit bir html formu hazırladık ve i etiketine onclick event’ine tooglePassword adındaki fonksiyonumuzu yazıyoruz ve i etiketine her tıklamada şifre alanındaki değeri şifre türü/metin türü olarak göster gizle yapıyoruz.

HTML(index.html)

Bu örneğimizde SemanticUI template’ini kullandık bundan dolayı üstteki kodda class’lar içerisindeki değerler SemanticUI template’inde tanımlı olan class’lardır.

tooglePassword adlı fonksiyonumuzun içeriğide altta gözüktüğü gibi her tıklamada şifre türü password ise text yada text ise password’e dönüştürülecek.

JAVASCRIPT(index.html)

Örneğimiz basit bir örnek olduğundan makale buraya kadar 🙂 şimdi bu örneğin tüm kodlarını görelim sizde kodları alıp deneyebilirsiniz, düzeltmeler yapabilirsiniz olayı anlamak açısından. Zaten html kodlarını saymaz isek toplamda 2 satır javascript kodu ile input’un text olan türünü password ve password olan türünü ise text’e çeviriyoruz her tıklamada.

HTML(index.html)

Javascript Şifre Göster/Gizle Yapımı
5 (100%) 2 oy

Murat ÖNER

1989 yılında Kocaelinin Dilovası ilçesinde doğdum ilkokul ve lise eğitimimi Kocaeli’de aldım, önlisans üniversite eğitimimi Mehmet Akif Ersoy Üniversitesi Gölhisar Meslek Yüksekokulu’nda bilgisayar programcılığı bölümünde yaptım. Üniversite dönemi boyunca Microsoft'un student partner projesinde yer aldım ve diğer student partner öğrencileri ile birçok farklı projede yer aldım. Üniversite eğitimi tamamlandıktan sonra staj yapmış olduğum Ries Technologies şirketinde yazılım geliştirici ve web designer olarak görev aldım ardından Gen Yazılım firmasında ERP ve HBYS sistemleri ile ilgili yazılım geliştirmeye devam ettim. Şuan aktif olarak mobil, web ve masaüstü uygulamalar geliştirmeye devam etmekteyim.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

%d blogcu bunu beğendi: