HTML5 telah membuat banyak perangkat tambahan untuk bentuk web, seperti tipe baru input, validasi formulir, dll. Placeholder adalah atribut lain yang ditambahkan ke HTML5. Ketika input atau TextArea mengatur atribut ini, konten nilai ini akan ditampilkan di kotak teks sebagai prompt kata abu-abu. Ketika kotak teks mendapatkan fokus, teks cepat menghilang. Di masa lalu, untuk mencapai efek ini, JavaScript digunakan untuk mengendalikannya:
Karena placeholder adalah atribut baru, hanya beberapa browser yang saat ini mendukungnya. Bagaimana cara mendeteksi apakah browser mendukungnya? (Lebih banyak deteksi fitur HTML5/CSS3 dapat diakses)
fungsi hasplaceHoldersupport () {
return 'placeholder' di document.createElement ('input');
}
Teks prompt default adalah abu -abu, dan gaya teks dapat diubah melalui CSS:
/ * semua */::-WebKit-input-placeHolder {color:#f00; } 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; }Kompatibel dengan browser lain yang tidak mendukung placeholder:
var placeholder = {
_support: (function () {
return 'placeholder' di document.createElement ('input');
}) (),
// Gaya teks cepat perlu ditentukan di lokasi lain di halaman
ClassName: 'ABC',
init: function () {
if (! placeholder._support) {
// TexTarea belum diproses, tambahkan apa yang perlu Anda lakukan
var input = document.geteLementsByTagname ('input');
Placeholder.create (input);
}
},
buat: function (input) {
input var;
if (! inputs.length) {
input = [input];
}
untuk (var i = 0, panjang = inputs.length; i <panjang; i ++) {
input = input [i];
if (! placeholder._support && input.attributes && input.attributes.placeHolder) {
Placeholder._setValue (input);
input.addeventListener ('focus', function (e) {
if (this.value === this.attributes.placeHolder.nodevalue) {
this.value = '';
this.classname = '';
}
}, PALSU);
input.addeventListener ('blur', function (e) {
if (this.value === '') {
Placeholder._setValue (ini);
}
}, PALSU);
}
}
},
_setValue: function (input) {
input.value = input.attributes.placeholder.nodevalue;
input.classname = placeholder.classname;
}
};
// Inisialisasi semua input saat inisialisasi halaman
//Placeholder.init ();
// atau atur elemen secara terpisah
//Placeholder.create(document.getElementById('t1 '));