Internet Explorer için Input Placeholder (input placeholders for Internet Explorer)

Mesleği front-end developer olan herkesin beynini yiyen bir konu cross-browserdır. En basitinden bir form bile yaptığınızda internet explorer da placeholderların çalışmadığını görüyoruz. Size biraz kolaylık sağlamak adına bu alandaki bilgimi sizinle paylaşacağım.

Öncelikle Modernizr’ı kullanmak en iyisi

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>

Önce yukarıdaki kütüphaneyi çağırdıktan sonra aşağıdaki jQuery kodlarını yazmak gerekiyor;

$(function () {
if (!Modernizr.input.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != ” && $(this).val() == $(this).attr('placeholder')) {
$(this).val(”).removeClass('hasPlaceholder');
}
}).bind('load blur', function () {
if ($(this).attr('placeholder') != ” && ($(this).val() == ” || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
}).trigger('load');
}
});

Bu kodları girdikten sonra tüm browserlarda Placeholderların çalıştığını göreceksiniz. Ve sorununuzun çözüldüğünü sanacaksınız. Asıl sorun bundan sonra başlıyor. Eğer dynamic validation yapıyorsanız form elemanlarında placeholderların tamamını value olarak görüp formu tamamlayıp size gönderim yapabilir. MVC ya da Aspx sistemlerde form validation’u için ayrı kurallar oluşturup onları kullanmanız gerekiyor.

Size altın gibi bir bilgi veriyorum mutlaka favorilerinize ekleyin bu yazıyı kesinlikle hayatınızı kurtaracaktır.

jQuery.validator.addMethod("placeholder", function (value, element) {
return value != $(element).attr("placeholder");
}, jQuery.validator.messages.required);

Yukarıdaki satırların altına bunu da eklerseniz. Ekstra bir kontrol ekleyip inputların value ile placeholderları aynı ise validasyondan geçmemesini sağlarsınız. Ve işinizi başarıyla sonlandırmış olursunuz.

 

Zaman ayırdığınız için teşekkürler.

Tekrar görüşmek üzere.

6 Yorum var
  • Osman Fikret
    Mart 6, 2013

    Hazırladığın çalışma çok faydalı ve kullanılan sistemde placeholder ve IE sorununa iyi bir çözüm.

    • fatmagül
      Haziran 19, 2015

      Formların boş olarak gönderilememesi için yaptığım validation kontrolünde de aynı sorun ortaya çıkıyor. Normalda sorunsuz çalışırken IE de ve Safari de formlar boş olarak da gönderilebiliyor, bunun için de bir çözümün var mı, çok makbule geçer 🙂

    • fatmagül
      Haziran 19, 2015

      Mesela şimdi senin buraya yazdığım formunda da test ettim, Ie de sorunsuz çalışıyor, site ziyaretçisi doldurulması zorunlu alanları doldurmadan form gitmiyor, özellikle IE de nasıl çözdüğünü paylaşırsan sevinirim

      • Emre Dardagan
        Haziran 22, 2015

        Selam aslinda bu makale komple IE de cozulen sorunla alakali ama ornek olarak kodlarini bana ulastirabilirsen sorununu cozmene yardimci olabilirim.

  • Hasan
    Aralık 1, 2013

    merhaba size göre saçma bir soru olabilir ama jQuery kodunu nereye eklememiz gerekiyor? site genelinde sorunu çözeceği için herhangi bir yere gibi anlıyorum ama yinede sorayım dedim.. ie’de sıkıntı olduğu için inputların yanındaki açıklama yazılarını kaldıramıyorum ama sorunu çözersem form’um ciddi anlamda sadeleşecek.. şimdiden tşk ederim beni mazur görün lütfen..

    • Emre Dardağan
      Ocak 5, 2014

      Sayfa icinde sitenin hizi acisindan sonlara eklersen daha yararli olur, ama istedigin yere ekleyebilirsin. 🙂

      Yardimci olabildiysem ne mutlu bana..

      NOT: Gec cevap icin uzgunum..

Cevapla

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir