Merhabalar,
Bu yazımda bazı login (giriş) sayfalarında görebileceğiniz şifreyi bir tık ile gösterip tekrar gizleyebileceğiniz özellikten bahsedeceğim. Tıklama olayını yakalamayı Jquery ile yapacağız. Tıkladıktan sonra input elementinin type niteliğini değiştireceğiz.
Bildiğiniz üzere şifre girişlerinde type=”password” olarak ayarlanır. Bu da şifreyi görünüme kapalı olacak şekilde ayarlar. Şifreyi göstermek için type niteliğini text olarak ayarladığımızda şifre görünür hale gelecektir.
Hemen nasıl yapabiliriz bakalım;
<input type="password" name="sifre" class="sifre">
<i id="degistir" class="fa fa-eye"></i> Öncelikle şifre girilen input elementinin hemen sonuna aç/kapa özelliğini belirtmek için örnek bir göz ikonu koyalım. İkon olarak ben FontAwesome kullandım. Kendinize özel ikon veya metin de kullanabilirsiniz.
Bu ikonu Css ile input içine alabilirsiniz veya asarım durumuna göre konumlandırabilirsiniz. Ben örnek bir giriş yap sayfası oluşturdum yazının sonunda codepen üzerinden paylaşacağım oradan da esinlenebilirsiniz.
Önemli kısma geçelim. Jquery kodumuz aşağıdaki gibi olacaktır;
// Sayfa hazır olduğunda
$(document).ready(function () {
// değiştir göz ikonuna tıklandığında
$("#degistir").click(function () {
// eğer type niteliği password ise
if ($(".sifre").attr("type") == "password") {
// type niteliğini text olarak değiştir
$(".sifre").attr("type", "text");
}
// password değil text ise
else {
// type niteliğini password olarak değiştir
$(".sifre").attr("type", "password");
}
});
}); Yazılan Jquery kodunu adım adım yorumlayarak açıklamaya çalıştım. Anlamadığınız bir nokta olursa yorumlarda belirtmeyi unutmayın.
Aşağıda test etmeniz veya örnek olarak incelemeniz için dediğim gibi codepen üzerinden yaptığım projeyi paylaştım.
See the Pen Jquery ile Şifreyi Göster – Gizle by furkangiray.com (@furkangiray_com) on CodePen.
Umarım işinize yarar.
Mutlu Kodlamalar 🙂
1 comment