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

Javascript Şifre Göster/Gizle, 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 bu makalede göreceğiz.

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

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 Kodumuz

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 Kodumuz

Ö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 Son Hali

Html ve javacript tarafında yazdığımız ve üstte sizlerle paylaştığımız kodların demosunu canlı olarak alttaki araçtan görebilirsiniz. Daha önce belirttiğim tasarım konusunda ki bir uyarıyı sizinle tekrar paylaşmak istiyorum alttaki Result sekmesinde gözüken tasarım SemanticUI’a ait bir tasarımdı. Bu tasarımı kullanmak isterseniz html kodları içeriside link etiketi ile kullandığım semantiui cdn linkinden faydalanabilirsiniz.

Demo

Javascript Şifre Göster/Gizle Özeti

Javascript’de şifre göster/gizle olayını bu makalede gördük ve demo üzerinden sizlere nasıl çalıştığını canlı olarak sunduk. Umarım projelerinizde aktif olarak kullanabileceğiniz ufak bir ipucu olur sizin için. Farklı javascript örnekleri ve ipuçları için alttaki benzer makalelere bakabilir yada site kategorilerinden javascript kategorisinden diğer makalelere de gözatmanızı öneririm.


📚 Javascript Şifre Göster/Gizle Benzeri Makaleler


✍  Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗  Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋  Bir sonraki makalede görüşmek dileğiyle.