Cross Browser Html5 Placeholder - Dewa Blogger

Halaman

    Social Items

Buy Now

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}

Lihat Demo


Sumber https://www.dte.web.id/