Cross Browser HTML5 Placeholder

Tabel Konten
  1. jQuery 
  2. CSS 

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

7 Komentar

  • ibnu

    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

  • Anonim

    Mantab Bos ... Langsung Praktek :)

  • Fajrin

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

  • dhanyn10

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

  • Admin

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

  • Anonim

    bagus tapi kurang tertarik.. soalnya masih kurang fa

Komentar telah ditutup.