jQuery Dersleri

jQuery ile Formdaki Şifreyi Görüntüleme

İlk olarak Windows’un giriş ekranında karşılaştığım ve hoşuma giderek hemen hemen her yerde kullanmış olduğum bu özelliğini sizlerle paylaşmak istedim. Eminim benim gibi merak edip denemeler yapanlar, bu uygulamanın kullanımı hakkında bilgiye sahiptir zaten. Bilmeyenlere, ufkunu genişletmek isteyenlere bu dersi hazırlama gereğinde bulundum. Umarım bu konu yol gösterici olur ve sınırsız bir deryada başka neler yapılabilirliği konusunda fikir sahibi edinmiş olursunuz.

Hala karşılaşmadıysanız ya da dikkate almadıysanız, yukarıda yer alan hareketli resimden söz ediyorum. Görselde mouse imleci yer almasa da yukarıda yapılan işlem; Sağda yer alan göz işaretine basıldığında, Password olarak tanımlanan input alanının tipi, text olarak değiştiriliyor. Böylelikle Password alanına yazılan yazı görünür oluyor. Daha sonrasında tekrar o işarete basıldığında, her şey eski haline getirilerek, Password alanı gizliliğini koruyor.

İlk olarak basit bir form alanı oluşturuyoruz. Derste hazırlamış olduğum formu isteyenler aşağıdaki EK DOSYALARI İNDİR butonunu kullanarak tam halini indirebilirler.


<div id="Form">
   

<h3>Kullanıcı Giriş Paneli</h3>


   

<form action="" method="POST">
      <input type="text" placeholder="Kullanıcı Adınız" class="kullanici">
      <input type="password" placeholder="Şifreniz" class="sifre">
      

<div class="goz"></div>


      <button>Giriş Yap</button>
   </form>


</div>


Görmüş olduğunuz gibi basit bir form yapısı kullandım. Burada yer alan

, inputla olan işlerimizi sağlayacak olan divdir. Gel gelelim bu goz divine tıklatıldığında yapılacak olan jQuery işlemlerine…

$(function(){
   $('#Form div.goz').click(function(){
      var input = $('.sifre');
      if(input.attr('type') == 'password'){
         $(this).css("background","url(gizle.png)");
         input.attr('type', 'text');
      }else{
         $(this).css("background","url(goster.png)");
         input.attr('type', 'password');
      }
   });
});

4. Kod satırında; İşlem yapacağımız input alanını seçip, bir değişkene atıyoruz.
5. Kod satırında; Seçilen input’un type değerini alıyoruz. Bu değer password’e eşitse sorguyu çalıştırıyoruz.
6. Kod satırında; goz divindeki resmi, Gizle.png isimli resimle değiştiriyoruz.
7. Kod satırında; Seçilen input değerini, text yapıyoruz. Böylelikle Password kısmına yazılan yazılar görünür oluyor.
9 ve 10. Kod satırında; İnput değerini ve div değerini eski haline getiriyoruz.

Böylelikle Windows’ta yer alan şifre bölümünü form’a uyarlamış olduk. Bunu fonksiyon haline getirerek birden fazla yerde de kullanabilirsiniz. Makalenin başında da belirttiğim gibi mümkün oldukça bunu kullanmaya çalışıyorum. Bence çok güzel bir pratiklik katan uygulama.

Bu Uygulama Neden Kullanılmalıdır?

Şifresi uzun ve farklı ifadelere sahip olanlar için (yani ben) kullanım kolaylığı sağlayacaktır. Şifre içeriği karışık olanlar bu butonu kullanarak yanlış yaptığı yeri kolayca tespit edebilirler. Böylelikle ziyaretçilerinizin kalbini kazanmış olursunuz.

Bir önceki yazım olan jQuery ile Yanıp Sönen Link Yapma başlıklı makalemi de okumanızı öneririm.

İlgilizi Çekecek Konular

jQuery ile Resimleri Yeniden Boyutlandırma

ibrahim Çevrük

jQuery ile Checkbox Hepsini Seç veya Kaldır Yapma

ibrahim Çevrük

jQuery Temel Bilgiler ve Seçiciler

ibrahim Çevrük

Yorum Giriniz