"Password" gets displayed as "********" in IE for placeholder

Question

I am using HTLM5 placeholder and added modernizr.js to make it work in IE. The code segment is :

<input type="password" placeholder="Password">

function hasPlaceholderSupport() {
   var input = document.createElement('input');
   return ('placeholder' in input);
}


$(document).ready(function(){
    if(!Modernizr.input.placeholder){ 

        $('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                }
            })
        });

    }
});

It is working fine for other browser and i want to display the text for input type password in IE but instead it puts the placeholder in the masking characters. How can the "Password" text be displyed.

Answer 1

The problem is that your placeholder fallback script is using the field's value to show the placeholder.

Password fields, of course, hide their value, so this technique will fail on password fields in exactly the way you described.

What you need is a placeholder script which works by writing the placeholder text into an extra element which is overlaid on top of the field (or behind it if the field's background is transparent). The script can then alter this element, rather than altering the field's value.

There are a whole load of scripts available which do exactly this - this one, for example (but there are many others too).

The other option is to dynamically change the field type from password to text and back again whenever the placeholder is toggled. This might be a quicker win to fit into your existing code, but I'd recommend using the other technique instead for the long term.

Hope that helps.