HTML İnput Türü Date Olan Giriş Nesnelerinde Placeholder Sıkıntısı

Aslında başlıkta bahsettiğimiz gibi bu bir sıkıntı değil olması gereken durum çünkü yeni nesil tarayıcılarda date türündeki input nesnesi için ekrana giriş yapacağı tarih formatını daha önce maskedinput’da kullandığımız gibi bir maske uygulanmaktadır.

HTML input türü date olan giriş nesnelerinde placeholder sıkıntısı

HTML5 ile beraber gelen bir çok yeni input türünden biridir date türü şimdi date türünün farklı tarayıcılardan nasıl yorumlandığını ve farklı tarayıcıların kullanıcılara maskeyi nasıl gösterdiklerini görelim.

Öncelikle date türündeki input nesnesine ait html kodumuz aşağıdaki şekilde olacak.

HTML

Chrome

Yukarıdaki görüntüyü elde etmek oldukça basit tek yapmamız gereken makalenin başında sizlerle paylaştığım html kodunu sayfanıza eklemek yalnız her tarayıcı aynı sonucu vermemektedir yukarıdaki görüntü Google Chrome tarayıcısına aittir date türündeki input nesneleri için hem maske uygulamaktadır hemde datepicker çıkarmaktadır istersek elle istersekte datepicker’dan tarih seçimi yapabilmekteyiz.

Internet Explorer 11 ve Firefox 31.0 tarayıcılarında denediğimde mağlesefki date türündeki input nesnesine halen text türü gibi davranmaktadır ve desteklemediğini görmekteyiz bu tarayıcıların.

Mobil platformlarda ise date türündeki input nesnesine tıkladığımızda aşağıdaki datepicker’lar çıkmaktadır karşımıza.

Android

IOS

Makalenin asıl konusu olan placeholder sıkıntısına gelelim ben bootstrap kullandığımda karşılaştım placeholder sıkıntısı ile normalde text türündeki input nesnesinde placeholder sorunsuz olarak gösteriliyor fakat inpu türünü date olarak değiştirdiğinizde placeholder yok oluyor bunu aşmanın en prakit yolu onblur ve onfocus event’lerini kullanmaktır date türündeki input nesnenizin placeholder’ida olsun istiyorsanız tasarım aşamasında input türünü text olarak bırakın ve aşağıdaki gibi onfocus ve onblur event’lerinide attribute olarak eklediğinizde input nesnenize odak input nesnesine kaydığında input türü date olarak değişecek odak input nesnesinden ayrıldığında ise input türü text olarak değişecek böylelikle değer girilmediğinde placeholder’imizda çalışmış olacak.