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ı 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, şifreyi görünmez yapar. Şifreyi göstermek için type="text" olarak değiştirildiğinde, şifre kullanıcıya görünür hale gelir.

Hemen nasıl yapılacağına bakalım:

<input type="password" name="sifre" class="sifre">
<i id="degistir" class="fa fa-eye"></i>

Burada şifre girilen input elementinin hemen yanına bir göz ikonu (FontAwesome) yerleştirdik. Siz dilerseniz başka ikonlar veya metin de kullanabilirsiniz.

Şimdi de jQuery ile bu göz ikonuna tıklama olayını yakalayalım ve şifreyi göster/gizle işlemini yapalım:

// Sayfa yüklendiğinde
$(document).ready(function () {
  // Göz ikonuna tıklanırsa
  $("#degistir").click(function () {
    if ($(".sifre").attr("type") == "password") {
      $(".sifre").attr("type", "text"); // Şifreyi göster
    } else {
      $(".sifre").attr("type", "password"); // Şifreyi gizle
    }
  });
});

jQuery kodu oldukça basit ve işlevseldir. Kullanıcı deneyimini artırmak için bu küçük dokunuşları eklemek faydalı olabilir.

Umarım işinize yarar. Mutlu Kodlamalar :)