Input Mask

Etiketler(label) formlarda ilgili alanların içeriklerine ne gelmesi gerektirlerini belirten elemanlardır ve bütün formlarda farklı şekillerde kullanılır. Çoğu durumda bu etiketleri inputların sağına, soluna ya da üstüne koymak yeterlidir. Ama bazı durumlarda bunları input alanının üzerine/içine koymak gerekebilir. Bunu jQuery kütüphanesini kullanarak basit bir uygulamayla halledebiliriz.

$('input, textarea').focus(function() {
 value=$(this).val();
 $(this).attr("value","");
});

$('input, textarea').blur(function() {
 if($(this).val()=="") {
  $(this).val(value);
 }
});

Çok basit değil mi? Ama bu çözüm kullanıldığında “form validation“larında bazen sıkıntılara, fazladan uğraşlara neden oluyor. O yüzden input alanının içini boş bırakmak programcıların işlerini daha da kolaylaştırıyor.

Input Mask

Buna çözüm düşünürken Grooveshark‘ın arama kısmındaki uygulama karşıma çıktı. Ben de ondan esinlenerek ve jQuery’den faydalanarak bu eklentiyi yaptım. Örnek uygulamaya buradan gidebilirsiniz.

Faydaları, Özellikleri

  • Dosya boyutunun 1kb’tan ufak olması,
  • Eklenti ve nesneye yönelik olduğu için birden fazla input ve textarea alanına uygulanabilmesi,
  • Kodu uygulamak için sadece tek satır JS kodunun yazılması.
  • Input alanına girildiğinde label belirsizleşiyor birşeyler yazıldığında ise label tamamen kayboluyor. Eğer alan boşaltılırsa label geri geliyor.

Bu eklentide input alanları tamamen boş bırakılıp hemen onun üzerindeki “label” elementi kaybolup geri geliyor.

JS

$("sınıf veya ID").inputmask();

Input” ve “label” elementlerini saran elementin sınıfı ya da ID’si.

HTML

<div class="sınıf">
  <label for="name">Label adı</label>
  <input type="text" id="name" />
</div>

Label’ın “for” özelliği ile ilişkilendirilecek “input“un “ID“si aynı olmalı.

CSS

label {position:absolute; margin:5px 0 5px 5px}

ÖrnekKaynağı İndir

Farkettiğiniz bir sorun veya geliştirdiğiniz bir yönü olursa yarumlara eklerseniz ortak paylaşıma siz de katkıda bulunmuş olursunuz.