Textbox şifre göster gizle – ShowPassword.js

Sitemde paylaştığım çalışmaları anlatmaya genelde başımdan geçen olaylardan bahsederek başlarım. Maksat daha açıklayıcı olsun diye değil, zaten görmüş olduğunuz hareketli resim her şeyi açıklar nitelikte. Yazıları uzatmadaki asıl amacım içeriğin boş gözükmemesidir. Ayrıca paylaştığım örnekleri nerelerde kullanabileceğiniz hakkında fikirler vermektir. Kullanım bölümüne geçtiğiniz anda her şey zaten apaçık ortada olur.

Çoğu zaman klavyede yanlış tuşlara basmış olma ihtimalim olabilir diye defalarca şifrelerimi siler ve tekrardan yazmaya başlarım. Hele ki benim gibi çok uzun ve karmaşık şifreler kullanan kişiler için işkenceden farksızdır bu tür durumlar. Sebebi ise bildiğiniz input alanlarında parola girdiğimizde şifremizi göremiyor olmasıdır. Acaba doğru mu yazdım yoksa yanlış mı ? Amaaan al başa tekrardan yaz.   jQuery ShowPassword benzeri bir sürü uygulama olmasına rağmen kullanan web sitesi sayısı oldukça fazladır. Siz de üyelerinize kolaylık sağlamak amacıyla giriş formlarınıza bu tür uygulamalar ekleyebilirsiniz.

Kullanım :

• Head etiketleri arasına eklemeniz gereken bölüm.

Css dosya adresi : 

Bu dosya içinde reset kodları olduğu için sitenizin tasarımını bozabilir. Siteniz  için ihtiyaç duyduğunuz kodlar dışındakileri silebilirsiniz.

<link href="stylesheets/screen.css" rel="stylesheet" media="screen,projection" />

Stil kodları : 

.forms li {
  position: relative;
}
.show-password-link {
  display: block;
  position: absolute;
  z-index: 11;
}
.password-showing {
  position: absolute;
  z-index: 10;
}

Body etiketleri arasına eklemeniz gereken bölümler.

Html form kodu :

 <form action="#">
    <ol class="forms">
      <li>
        <label for="username">Username</label>
        <input type="text" name="username" id="username" />
      </li>
      <li>
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="password" />
      </li>
      <li class="buttons">
        <button type="submit">Submit</button>
      </li>
    </ol>
  </form>

 Js dosya adresleri : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="scripts/jquery.showPassword.js"></script>

JavaScript :

<script>
$(document).ready(function() {
  $(':password').showPassword({
    linkRightOffset: 5,
    linkTopOffset: 11
  });
});
</script>