HTML5 ile beraber gelen ve en sık kullanılan özelliklerden biride placeholder özelliğidir eskiden input’lara girilecek bilgileri nesne üzerine label yerleştirerek belirtirdik şimdi ise direk giriş nesnesi içerisine placeholder ekleyerek yetinebiliyoruz.
HTML5 Placeholder özelliğini desteklemeyen tarayıcılara özelliği kazandırma
Placeholder öncesinde kullandığımız yöntem
HMTL
1 2 | <label for="ad">Adınız</label> <input id="ad" /> |
Sonuç
Placeholder özelliği kullanarak kullandığımız yöntem
HTML
1 | <input placeholder="Adınız" /></p> |
Sonuç
Gördüğünüz gibi placeholder ile hem daha az nesne tanımlıyorsunuz hemde sayfada kalabalıktan kurtulmuş oluyorsunuz fakat HTML5 ile beraber geldiği için tüm tarayıcılar desteklememetedir özellikle Internet Explorer 6-7-8 versiyonlarının placeholder desteği mağlesef yoktur placeholder desteği olmayan tarayıcılar için bu özelliği kazandırmak jquery kodu ile mümkün tek yapmanız gereken placeholder özelliğini kullandığınız sayfaya aşağıdaki kodu eklemek olacaktır.
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript"> $(function () { if (!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) { $(this).val('').removeClass('hasPlaceholder'); } }).blur(function () { if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); } }); $(':text').blur(); $(active).focus(); } }); |
Yukarıdaki kodun çalışabilmesi için jquery kütüphanesini sayfanıza eklemeniz gerekmektedir.