Monday, June 17, 2013

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

Labels: , ,

7 Comments:

At Monday, June 24, 2013 at 4:19:00 PM GMT+7, Blogger ibnu said...

Wah keren gan .. ini bisa" blog ane dari blog DTE lagi .... thanks gan ... apa yang saya cari pasti ada dh disini ... cek www.novaibnu.com

 
At Friday, June 28, 2013 at 5:05:00 PM GMT+7, Anonymous Anonymous said...

Mantab Bos ... Langsung Praktek :)

 
At Wednesday, July 3, 2013 at 11:13:00 AM GMT+7, Blogger Fajrin said...

untuk masalah blog agar lebih ringan (scroll dan loading) kira2 kode mana yg harus ane hilangin atau kurangin ya mas ?? bantuannya dong..

 
At Saturday, July 13, 2013 at 11:42:00 AM GMT+7, Blogger dhanyn10 said...

mas taufik, caranya mengalihkan hosting css misalkan yang mas lakukan untuk blog ini ke googlecode itu bagaimana ya?

 
At Sunday, July 14, 2013 at 6:35:00 PM GMT+7, Blogger Taufik Nurrohman said...

/2013/02/hosting-file-dengan-google-code-dan.html

 
At Monday, July 29, 2013 at 10:41:00 AM GMT+7, Blogger Admin said...

:D benar2 dukun Jquery, top deh.... ^_^

 
At Saturday, December 7, 2013 at 4:45:00 PM GMT+7, Anonymous Anonymous said...

bagus tapi kurang tertarik.. soalnya masih kurang fa

 

Post a Comment

<< Home