HTML5 Yer Tutucu Özelliğine Bir Bakış
HTML5'teki en sevdiğim yeni parçalardan biri, ekleme yeteneği Yer Tutucu Metni kolayca. Yer tutucu metni, kullanıcılara bu alanda ne tür bir girdi beklendiği hakkında ipucu vermek için kullanılan bir girdi alanında bulduğunuz gri metindir. Kullanıcılar bir kez yazmaya başladı giriş alan bu metin kaybolacak.
Eski günlerde, bunu genelde yapıyoruz JavaScript ile, aşağıdaki gibi;
Bu uygulamada yanlış olan bir şey yok, ancak HTML5'te daha kolay.
HTML5, mantıksal bir adla yeni bir özellik ortaya koydu; tutucudur. İşte bir örnek:
Tarayıcılarda görüntülersek, girişin aşağıda görüldüğü gibi gri renkli metne sahip olması gerekir;
Dikkat edilmesi gereken birkaç şey: şartnameye göre, tutucudur özellik bir alternatif olarak kullanılmamalıdır etiket Ayrıca, bu özelliğin yalnızca giriş metin gerektiren türler, örneğin. Metin, parola, arama, E-posta, textarea ve tel.
Ekleme tutucudur -e giriş türleri: radyo ve onay kutusu fark yaratmayacak.
Yer Tutucu ve CSS
Ayrıca, yer tutucu metnini CSS ile biçimlendirmek de mümkündür, ancak bu yazının yazıldığı sırada hala yalnızca Firefox ve Webkit tarayıcılarıyla sınırlıdır..
Aşağıdaki örnek, Webkit ve Firefox'ta yer tutucu metnini yeşile nasıl değiştirdiğimizi gösterir;
input :: - webkit-input-placeholder color: green; input: -moz-placeholder renk: yeşil;
Sadece hatırlamak için olsa :: - webkit-girdi-tutucu ve : -Moz-tutucu sadece metni etkileyecek ve paralel olarak yazılamaz.
input :: - webkit-input-placeholder, input: -moz-placeholder color: green;
Bu kod parçası çalışmayacak.
Özellik Seçici
CSS3 ayrıca bu özelliği tanıtmak için destek oldu. [Tutucu] özellik seçici;
giriş [yer tutucu] sınır: 1 piksel düz yeşil;
Yukarıdaki örnekte, her birini seçiyoruz giriş o vardır tutucudur sınırı atlayın ve yeşile çevirin.
Tarayıcı Uyumluluğu
Bu yeni HTML5 özelliği şaşırtıcı derecede eski tarayıcılarda desteklenmiyor ve şu anda yalnızca tam olarak destekleniyor: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 ve Internet Explorer 10 (henüz resmen serbest bırakılmadı).
Yer Tutucu Polyfills
Bununla birlikte, yer tutucuyu eski tarayıcılarda göstermemiz gerekirse, ancak yine de tutucudur öznitelik, Polyfills kullanabiliriz. Orada bir sürü Yer Tutucu Polyfills orada ama bu örnekte PlaceMe.js'yi kullanacağız;
PlaceMe.js, Yukarıdaki kod parçasından görebileceğiniz gibi, jQuery'ye bağlıdır. Şimdi, örneğin, Internet Explorer 9’da görüntülersek, tüm girdilerin şimdi yer tutucu metnini görüntülemesi gerekir..
- Demoyu Gör
- Kaynak İndir
Son düşünce
HTML5 Yer Tutucusu öznitelik kesinlikle yer tutucu metninin eklenmesini kolaylaştırır. Şimdi hangi yöntemlerin kullanılacağını seçmek bize kalıyor, web geliştiricileri ve tasarımcıları: JavaScript veya HTML5.
Eski tarayıcıları desteklemek için Polyfills ve jQuery kullanmanın gereksiz olduğunu düşünüyorsanız, iş için JavaScript daha uygun görünmektedir. Ancak eski tarayıcıları barışçıl bir şekilde görmezden gelebilirseniz, HTML5 Yer Tutucu'yı kullanmak muhtemelen daha iyi bir yoldur.
