##### Jquery.com Plugin Page

Sebep? Pek çok sitede arama kutucukları vardır. Bu arama kutucuğundaki metin alanının karşısına bir label yerleştirmek yerine, içerisinde “Arama yapın” gibi ibareler yerleştirilir, ve siz metin kutusunu tıkladığınızda o metin kaybolur ve metin alanı sizin istediğiz karakterleri yazmanız için boşalır. Hiç bir şey yazmadan başka bir yere tıklarsanız, metin kutusundaki içerik tekrar eski haline (“Arama yapın”) geri döner.

Site içerisindeki arama kutularına buna benzer bir özellik katmak isterken, ufak bir eklenti oluşturmuş oldum. Yukarıda anlattığım senaryodaki özelliklerin hepsini taşıyor. Ek olarak metin alanına tıkladığınızda onu daha belirgin hale getirmek için ufak bir css biçimlendirmesi de oluşturuyor.

İşte Eklenti Kodu:

(function($) {
  $.fn.textboxhelp = function(options){
    var defaults = {help: 'Help me!', focuscls:'focus'};
    // gelen parametreler ile bizimkini birleştirelim
    var opts = $.extend(defaults, options);
    $(this).val(opts.help);
    $(this).focus(function(){
       var t = $(this).val();
      // metin alanına odaklanıldığı zaman içeriğini temizleyelim
      // eğer daha önce girilmiş bir metin var ve bu varsayılan yardım metini ise
      if(t.length > 0 && t  opts.help)
        $(this).addClass(opts.focuscls).val('');
    }).blur(function() { 
      // girilen metini kontrol için hafızada tutalım
      var t = $(this).val();
      // eğer metin alanı boşsa yardım metinini tekrar ekleyelim
      if(''  t)
         $(this).removeClass(opts.focuscls).val(opts.help);
    });
  }
})(jQuery); 

Kullanımı:

$().ready(function(){
  $('#search').textboxhelp({help:'Arama yapın!'});
});

Burada kullandığımız #search metin alanımızın id parametresi. Eklenti çok basit, eklemeler yapılarak daha değişik davranışlar eklemek mümkün olabilir.

Uygulamanın örneğine ulaşmak için: textbox help
Uygulama dosyalarını indirmek için: textbox-help.zip
Jquery.com Plugin Page