2014年3月31日 星期一

input password placeholder workaround IE

the workaround solution for using placeholder on IE<10
it works for IE7~10

(credits to

<!-- Style = display none for people who dont have javascript -->
<input id="fake_pass" name="fake_pass" style="display: none;" type="text" value="Enter Password:" />
<input id="real_pass" name="real_pass" type="password" />

// On DOM ready, hide the real password

// Show the fake pass (because JS is enabled)

// On focus of the fake password field
    $(this).hide(); //  hide the fake password input text
    $('#real_pass').show().focus(); // and show the real password input password

// On blur of the real pass
    if($(this).val() == ""){ // if the value is empty, 
        $(this).hide(); // hide the real password field
        $('#fake_pass').show(); // show the fake password
    // otherwise, a password has been entered,
    // so do nothing (leave the real password showing)