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 <div class="goz"></div>, inputla olan işlerimizi sağlayacak olan divdir. Gel gelelim bu goz divine tıklatıldığında yapılacak olan jQuery işlemlerine…

<script type="text/javascript">
$(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');
}
});
});
</script>

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.
EK DOSYALARI İNDİR (59)
DEMOYU GÖRÜNTÜLE (257)
- 02.09.2015 / 19:03:26 10

Sosyal Medya Paylaşım Alanı

Makale Destekli Kütüphane Verileri

Bunlarda İlginizi Çekebilir

Java Dersleri

Java Programlama Derslerine Başlıyoruz!

Kategori: Java Dersleri | 09.08.2013
2:25 Php Dersleri

Php ile Yazıları Tersine Çevirme | strrev();

Kategori: Php Dersleri | 04.05.2013
Photoshop

Facebook Zaman Tüneli Resmi Yapma

Kategori: Photoshop | 03.05.2013
5:59 Javascript

Ekran Çıktısını Yazıcıya Yollamak

Kategori: Javascript | 03.05.2013

Yorum Listesi (3) # YorumYap

  • emre (15.09.2015 - 20:42:20)
    Uygulama çok güzel ..velakin ie10 da düzgün çalışmıyor..
  • Reis (26.04.2016 - 23:17:17)
    Reis demo çökmüş ya :(
  • Hasan (05.02.2017 - 21:10:49)
    allah razı olsun

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.