Komentar: Banyak fitur baru yang menarik telah diperkenalkan di HTML5; Beberapa tercermin dalam HTML, beberapa API JavaScript, yang semuanya sangat berguna. Salah satu fitur favorit saya adalah properti placeholder di kotak teks (input).
Properti placeholder memungkinkan Anda untuk menampilkan informasi cepat di kotak teks. Setelah Anda memasukkan informasi apa pun di kotak teks, informasi prompt akan disembunyikan. Anda mungkin telah melihat efek ini berkali -kali sebelumnya, tetapi kebanyakan dari mereka diimplementasikan dalam JavaScript, dan sekarang HTML5 memberikan dukungan asli dan berfungsi lebih baik!
Kode HTML
Anda juga telah melihat bahwa yang perlu Anda lakukan adalah menambahkan atribut placeholder ke label deklarasi kotak teks. JavaScript sama sekali tidak diperlukan untuk membuat efek ini.
Periksa apakah browser mendukung atribut placeholder
Karena placeholder adalah properti baru, sangat perlu untuk memeriksa apakah browser Anda mendukungnya. Misalnya, IE6 dan IE8 jelas tidak didukung:
fungsi hasplaceHoldersupport () {
var input = document.createElement ('input');
return ('placeholder' dalam input);
}
Jika browser pengguna tidak mendukung fitur placeholder, Anda perlu menggunakan mootools, dojo, atau alat JavaScript lainnya untuk mengimplementasikannya:
/* mootools ftw! */
var firstNameBox = $ ('first_name'),
pesan = firstNameBox.get ('placeholder');
firstNameBox.addevents ({
fokus: function () {
if (firstNameBox.Value == pesan) {SearchBox.Value = ''; }
},
blur: function () {
if (firstNameBox.Value == '') {SearchBox.Value = pesan; }
}
});
Mempercantik placeholder dengan CSS
Selama penelitian lebih lanjut saya menemukan fitur CSS lain yang menarik: CSS mempercantik efek input placeholder. Izinkan saya menggunakan kode CSS sederhana untuk mempercantik teks placeholder di kotak teks.
Kode CSS
Penggunaan di browser Firefox berbeda dari yang ada di Google Chrome. Nama mereka mudah dimengerti:
/* semua */
::-WebKit-input-placeHolder {Color:#f00; }
::-moz-placeHolder {color:#f00; } / * Firefox 19+ * /
: -ms-input-placeHolder {color:#f00; } / * yaitu * /
input: -moz-placeHolder {color:#f00; }
/ * Individu: Webkit */
#field2 ::-WebKit-input-placeHolder {Color:#00F; }
#field3 ::-WebKit-input-placeHolder {Color:#090; Latar Belakang: Lightgreen; Teks-transform: huruf besar; }
#field4 ::-WebKit-input-placeHolder {font-style: italic; Dekorasi teks: overline; spasi surat: 3px; Warna:#999; }
/ * Individu: Mozilla */
#field2 ::-moz-placeHolder {color:#00f; }
#field3 ::-moz-placeHolder {color:#090; Latar Belakang: Lightgreen; Teks-transform: huruf besar; }
#field4 ::-moz-placeHolder {font-style: italic; Dekorasi teks: overline; spasi surat: 3px; Warna:#999; }
Anda dapat mengontrol font, warna, dan gaya teks placeholder. Anda bahkan dapat menampilkan placeholder kotak teks dengan cara animasi. Mempercantik kotak teks Anda adalah sesuatu yang terlihat kecil, tetapi untuk beberapa situs web interaktif, kunci kesuksesan terletak pada detailnya. Sekarang IE10 hanya mendukung placeholder. Saya percaya bahwa semakin banyak orang akan menggunakan efek placeholder asli ini.