Eklenti ile jQuery PlaceHolder Kullanımı
Merhaba Arkadaşlar,
Bu makalede sizlere genellikle formlarımız da ki text alanlarımızda kullandığımız bir HTML özelliği olan PlaceHolder ‘dan bahsedeceğim. Bu özellik sayesinde form içerisindeki text alanlarının öncesine yazdığımız ” Kullanıcı Adı ” , ” Parola ” gibi yazılar kaldırılarak text alanı içerisine taşınıyor ve text alanı yazı yazılmak üzere seçildiği anda yazı kaybolarak boş bir görünüm oluşuyor. Böylece eskiden günümüze taşınmış olan klasik form görünümünden ayrılarak daha değişik ve göze hoş gelen bir görünüm sağlanmış oluyor.
Ancak İnternet Explorer ‘ ın bir çok sürümü başta olmak üzere daha yaygın kullanılan internet tarayıcılarının da eski sürümlerinde bir HTML5 özelliği olan PlaceHolder maalesef tam istenilen sonucu veremiyor. Genelde karşılaşılan sorun ise text alanı seçildiğinde değil içerisine içerik girmeye başlayınca kaybolması oluyor.
Bu ve bunun gibi sorunların üstesinden gelebilmek için ise PlaceHolder adı altında bir çok kişi eklenti yazarak internet ortamında insanların paylaşımına sunmuşlardır. Google ‘ a ” placeholder.js ” yazarak çıkan linklerden bir çoğunda eklentinin kullanımı ile birlikte örnekli dosyaların paylaşımını yapmaktadırlar.
Kullanımı en basit olan eklentilerden birisini buraya tıklayarak github sitesi üzerinden indirebilirsiniz ( Link üzerinden kaldırılma ihtimaline karşı makalenin altındaki indirme yollarını da kullanabilirsiniz ) . İndirdiğimiz .rar uzantılı dosyanın içerisindeki klasörleri dışarı çıkartıyoruz. Daha sonra işimize yarayacak olan ” jquery.textPlaceholder.js ” dosyasını yeni bir klasör açarak içerisine kopyalıyoruz. Daha sonra ” www.jquery.com ” adresine bağlanarak ilk karşımıza gelen ekrandaki büyük ” Download ” butonuna tıklıyoruz. Açılan sayfa ‘yı ” Farklı Kaydet ” seçeneği ile az önce oluşturduğumuz klasör içerisine kaydediyoruz. Ve daha sonra bir durum değerlendirilmesi yapıyoruz.
- Yeni bir klasör oluşturduk,
- jQuery kütüphanesinin son sürümünü indirdik,
- Placeholder için indirilen .rar dosyası içerisinden işimize yarayan bir dosyayı kopyaladık.
Buraya kadar herşey sorunsuz bir biçimde halledildi ise şimdi uygulamamıza geçebiliriz. Yaratılan klasör içerisine ” index.html ” sayfamızı oluşturuyoruz. An itibariyle görünüm şu şekilde olacaktır :
Şimdi index sayfamız içerisine kodlarımızı oluşturmak için açıyoruz ve ana tag ‘lerimizi yazıyoruz.
<html>
<head>
<title>BilgiSayaci.Org - Placeholder Kullanımı</title>
</head>
<body>
</body>
</html>
Şimdi tag ‘lerimiz arasına ilk olarak jQuery kütüphanemizi ve daha sonrada placeholder dosyasını dahil ediyoruz. İki dosya tamamlandıktan sonratag’ lerimiz arasına geçerek bir adet text alanı yaratıyoruz. Makalemizin ana konusu olan Placeholder ‘ı ise unutmuyoruz ve bu text alanımızın içerisine ” Kullanıcı Adı ” değeri ile ekliyoruz.
<html>
<head>
<title>BilgiSayaci.Org - Placeholder Kullanımı</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.textPlaceholder.js"></script>
</head>
<body>
<input type="text" class="bilgisayaci" placeholder="Kullanıcı Adı" />
</body>
</html>
En belalı tarayıcılarımız dan İnternet Explorer eski sürümlerinde baktığımızda sanki hiç PlaceHolder kullanmamışız gibi içi boş bir text alanı gelecektir. Şimdi yeni bir tag ‘i açıyoruz ve içerisine text alanımıza atadığımız ” bilgisayaci ” class ‘ı için Placeholder işlemini yapmasını söylüyoruz.
BilgiSayaci.Org - Placeholder Kullanımı<script type="text/javascript" src=""jquery-1.8.2.min.js"><html>
<head>
<title>BilgiSayaci.Org - Placeholder Kullanımı</title>
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.textPlaceholder.js"></script>
<script>
$(document).ready(function(){
$('.bilgisayaci').textPlaceholder();
});
</script>
</head>
<body>
<input type="text" class="bilgisayaci" placeholder="Kullanıcı Adı" />
</body>
</html>
Kodları bu şekilde güncelledikten sonra İnternet Explorer da çalıştırdığımızda ilk açılışta direkt olarak text alanı içerisinde ” Kullanıcı Adı ” şeklindeki yazıyı göreceğiz. Mouse imleci ile bu alanı seçtiğimizde ise bu yazı kaybolacaktır. İşte tüm işlemde bu şekilde sonlanmış olacaktır.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 27 No ‘lu Maddeden İndirebilirsiniz..
Güzel anlatım 🙂