Q:

jQuery input placeholder for type password in IE8

I am using jQuery instead of HTML5 placeholder attribute
<input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Email'; }" onclick="if (this.value == 'Email') { this.value = ''; }"  />

this is working fine for type="text" but for type="password" it show only *
How i will use placeholder for password field? Need out in IE8
Advance thanks for answers...

A:

I create a normal input, and on focus switch it to a password field, and if the value is empty on blur, then switch it back to a normal input, else leave it as the password field.
Here is a working JSFiddle: http://jsfiddle.net/q8ajJ/
The HTML
<!-- Style = display none for people who dont have javascript -->
<input type="text" name="fake_pass" id="fake_pass" value="Enter Password:" style="display:none"/>
<input type="password" name="real_pass" id="real_pass"/>​

The Javascript (jQuery)
// On DOM ready, hide the real password
$('#real_pass').hide();

// Show the fake pass (because JS is enabled)
$('#fake_pass').show();

// On focus of the fake password field
$('#fake_pass').focus(function(){
    $(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
$('#real_pass').blur(function(){
    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)
});

​

A:

Here is another dirty hack - you can create label with position: absolute and show/hide it with JS on focus and blur.
As far as I know, it works in any browser. Moreover, it is more simple to validate form submitting.
HTML
<div class="wrapper">
    <input class="withPlaceholder" type="password" id="pass" />
    <label class="placeholder" for="pass">Password</label>
</div>
<br />
<div class="wrapper">
    <input class="withPlaceholder" type="password" id="pass2" />
    <label class="placeholder" for="pass2">Password2</label>
</div>

CSS
div.wrapper {position: relative}
label.placeholder {position: absolute; color: #CCC; left: 2px; top: 0} 

JS
$("input.withPlaceholder").on({
    focus: function() {
        $("label[for=" + $(this).prop("id") + "]").hide();
    },
    blur: function() {
        if ($(this).val().length == 0) {
            $("label[for=" + $(this).prop("id") + "]").show();
        }
    }
});

A:

Based on JustAnil's answer, and looking for a way to avoid having to manually add each corresponding  for every password fields, I came up with this adaptation of JustAnil's solution:
function ManagePasswords(root) {
    root.find('input[type=password][placeholder]').each(function (index, current) {
        var $current = $(current),
            $fake = $current.clone().attr('type', 'text');

        $fake.val($fake.attr('placeholder'));

        $fake.insertBefore($current);
        $current.hide();

        $fake.focusin(function () {
            $(this).hide();
            $(this).next().show().focus();
        });

        $current.blur(function () {
            if ($(this).val() == '') {
                $(this).hide();
                $(this).prev().show();
            }
        });
    });
}

Then all you have to do is call 
ManagePasswords($('#rootElement'));

Hope this helps!

