Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Home » JavaScript » jQuery » Potongan » Cross Browser HTML5 Placeholder

Cross Browser HTML5 Placeholder

JQuery

$('[placeholder]').each(function() {
var plc = $(this).attr('placeholder');
$(this).addClass('blur').removeAttr('placeholder').val(plc).on("focus blur", function(e) {
// Add a `blur` class to fade the text color for the default placeholder text
$(this)[(e.type == "blur" && (this.value === "" || this.value == plc)) ? "addClass" : "removeClass"]('blur');
// Set the value to `plc` on blur if the element value is empty
if (e.type == "blur" && this.value === "") $(this).val(plc);
// Set the value to empty on focus if the element value is same with the default placeholder text
if (e.type == "focus" && this.value == plc) $(this).val("");
});
});

CSS

input.blur,
textarea.blur {color:#bbb}

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Posting Komentar

Nama Saya ShannenPio . Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias . Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Kontak Sosial

Lain-lain

Dan Tidak lupa, Saya Ucapkan terimakasih atas kunjungan anda di blog yang sederhana ini.

Salam Mas Harris

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!