Yer Tutucu (PlaceHolder) Kullanımı

 bcakir
 13 Aralık 2011

Merhaba arkadaşlar, bu yazımda form elemanlarının içerisine girilen bilgilendirme yazılarının nasıl yapılacağını anlatacağım. Normalde bu işlem çok kolay ama internet explorer tarayıcısı sorun çıkarttığından dolayı yine kodlama yapmamız gerekecek. Uygulamamız Twitter’ın giriş sayfasında bulunan, kutular içerisinde yer alan bilgilendirme yazıları gibi olacak. Kutuya tıklayınca, bu yazılar kaybolup içerik girmemize izin verecek. Uygulamamızın temel işlevleri bu şekilde olacak. Şimdi örnek uygulamamızı yapmaya başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<title>Placeholder</title>
<script type="text/javascript">
window.onload = function(){
    //eğer microsoft explorer ise
    if(navigator.appName == 'Microsoft Internet Explorer'){
        //içerisine yazı yazılacak form elamanının id değeri ve içeriği
        add_placeholder('ad', 'Adınızı Giriniz...');
        add_placeholder('soyad', 'Soyadınızı Giriniz...');
    }
};

//placeholder fonksiyonu
function add_placeholder (id, placeholder){
	var el = document.getElementById(id);
	el.placeholder = placeholder;

    el.onfocus = function (){
		if(this.value == this.placeholder){
			this.value = '';
			el.style.cssText  = '';
		}
    };

    el.onblur = function (){
		if(this.value.length == 0){
			this.value = this.placeholder;
			el.style.cssText = 'color:#A9A9A9;';
		}
    };

	el.onblur();
}
</script>
</head>
<body>
<form>
<input type="text" name="ad" id="ad" value="" placeholder="Adınızı Giriniz..." />
<input type="text" name="soyad" id="soyad" value="" placeholder="Soyadınızı Giriniz..." />
</form>
</body>
</html>

Eğer internet explorer sorun vermeseydi, uygulamamızı sadece placeholder özelliğini kullanarak yapabilecektik fakat ie JavaScript’in birçok özelliğini desteklemiyor. Buna yabancı değiliz. Bundan dolayı da, kodlamayla kendimize placeholder yapma yolunu seçiyoruz. Siz de bu uygulama ile kolayca sitenize yer tutucu ekleyebilirsiniz. Yararlı olması dileğiyle, hoşçakalın.

 1.734 Okunma

Bu yazıya 13 yorum yapılmış.

  1. her zamanki gibi sorun microsoft’un ters anlayışından kaynaklanıyor.. güzel bir çalışma olmuş teşekkür ederim

  2. Denedim ama olmuyor.. Neden olmuyor acaba? Yardımcı olursanız sevinirim =)

    • Bende herhangi bir sorun yok. Sorununuzu söylerseniz yardımcı olmaya çalışırım. Uygulamayı hiç değiştirmeden denediniz mi, çalışıyor mu?

  3. smdi ugrastm oldu javascript bilgim yok ondn pek anlamamıstm. bn asp.nette bi web sayfası yapıyorum. placeholder ı bi singleline da ve 2 tane textbox da kullanıyorum. yazdıgınız gibi internet explorer da düzeldi ama bnm singleline a ve textboxlara verdiğim stil renkler falan kayboldu placeholder la kullanınca. yardımcı olursanız sevinirim

    iyi aksamlar

    • inputlara class ekle ve bu classlara css ile stil ver

  4. bunun başka yolu yokmu mesela verdiğiniz koda birşey eklenip yapılanbilen stile renklere falan karısmıcak şekilde

    • Maalesef başka şekilde yapamazsın. Örnek atıyorum sana. Sen değiştirip, geliştirirsin.
      input.giris_input {border: 1px solid #bbb; padding: 4px; width: 110px; height: 15px; font-size: 12px; background-color: #d2d7dc}
      input type=”text” name=”user” id=”user” value=”” placeholder=”E-posta” class=”giris_input” />

  5. teşekkür ederm iyi akşamlar =)

  6. ben bir konuda bilgi almak istiyorum form alanlarına uyguladığım zaman gönder diyine placeholder içindeki bilgileri kullanarak formda gönderme işlemini yapıyor. bunu nasıl düzeltebiliriz.

    • İstediğinle alakalı daha önce örnek yapmıştım. Örneğe buradan ulaşabilirsin. Özellikle değer girilip girilmediği kontrolü kısmını incele.

  7. Çok güzel bir anlatım olmuş emeğinize sağlık.

  8. Merhaba;

    Sitenizdeki Makaleler Gerçekten Çok Güzel…..
    Bu Makaleniz Çok İşimi Gördü Çok Teşekkürler…

  9. Bünyamin bey anlatımınız çok açıklayıcı olmuş anlaşılır olmuş teşekkür ederim.. Vaktiniz olursa inputlara mesela arama kutularına odaklanmanın nasıl gerçekleştiğini anlatabilirseniz çok seviniriz.. Mesela Google ilk açıldığında imleç direkt olarak arama kutusunun içinde yanıp sönüyor ya onun gibi yahut twitter ı ilk açtığınızda imleç direkt olarak kullanıcı adının yazılacağı textboxta yanıp sönüyor ya onun gibi.. Yani sayfa da birçok input var ama sayfa her yenilendiğinde sayfa başındaki inputa odaklanmasını istiyorum diyelim bunun nasıl yapıldığını anlatabilirseniz çok sevinirim..

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Html/Html5, JavaScript
Kapat