Showing Placeholder text for password field in IE

Question

I know there is a ton of placeholder questions, but I am trying to perfect mine.

My current code works great and does what it's supposed to. The problem is, when I go to place the "password" placeholder, it puts the placeholder in the masking characters. Any ideas on how to get around that?

    $(function() {
if(!$.support.placeholder) { 
        var active = document.activeElement;
    $(':text').focus(function () {
        if ($(this).attr('placeholder') != '' && $(this).val() ==  $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
        }
    }).blur(function () {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
        }
    });
    $(':text').blur();
    $(active).focus();
    $('form').submit(function () {
        $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
    });

    var active = document.activeElement;
    $(':password').focus(function () {
        if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
        }
    }).blur(function () {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
        }
    });
    $(':password').blur();
    $(active).focus();
    $('form').submit(function () {
        $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
    });
}
   });

My field for the pass:

  <div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>

Answer 1

You could also try this... it detects that the browser does not have support for placeholder and works for all input types

function FauxPlaceholder() {
        if(!ElementSupportAttribute('input','placeholder')) {
            $("input[placeholder]").each(function() {
                var $input = $(this);
                $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
                var $faux = $('#'+$input.attr('id')+'-faux');

                $faux.show().attr('class', $input.attr('class')).attr('style', $input.attr('style'));
                $input.hide();

                $faux.focus(function() {
                    $faux.hide();
                    $input.show().focus();
                });

                $input.blur(function() {
                    if($input.val() === '') {
                        $input.hide();
                        $faux.show();
                    }
                });
            });
        }
    }
    function ElementSupportAttribute(elm, attr) {
        var test = document.createElement(elm);
        return attr in test;
    }

Answer 2

Could you just swap out the original text field with a password field?

$('#pass').focus(
    function(){
        var pass = $('<input id="pass" type="password">');
        $(this).replaceWith(pass);
        pass.focus();
    }
);

<input id="pass" type="text" value="Passowrd">

http://jsfiddle.net/UrNFV/

Answer 3

I ran into this problem with IE before. Here's my solution :)

http://jsfiddle.net/mNchn/

Answer 4

If I'm understanding this right, you want the field to say "Password" when nothing has been typed into it; however, "Password" gets displayed as "********".

A decent fix to that (which also degrades gracefully, depending on how you code it) is to:

1. Put a LABEL before the password INPUT. Set the LABEL's text to "Password", and set its for attribute to point to the INPUT's ID, so that the INPUT is focused when the LABEL is clicked.
2. Use CSS to position the LABEL on top of the INPUT, so that they overlap, and it looks like "Password" is inside of the INPUT.
3. Make it so that the LABEL is only visible when some CSS class (.showMe, for example) is applied to it.
4. Use JavaScript to hide the LABEL
   • ...if the INPUT's value is an empty string
   • ...or if the user has selected (focused) the INPUT.

Answer 5

Depending on whether or not you want to be able to dynamically change the text inside the placeholder, your simplest solution might be to have the placeholder text be an image.

input {
    background: url(_img/placeholder.png) 50% 5px no-repeat;
    .
    .
    .
}
input:focus {
    background: none;
}

Clearly there are many different ways of using this method, and you will have to use some kind of a fix to get :focus to work on the browsers that don't support it.

Answer 6

Here my plugin :

if(jQuery.support.placeholder==false){
    // No default treatment
    $('[placeholder]').focus(function(){
        if($(this).val()==$(this).attr('placeholder'))
            $(this).val('');
        if($(this).data('type')=='password')
            $(this).get(0).type='password';
    });
    $('[placeholder]').blur(function(){
        if($(this).val()==''){
            if($(this).attr('type')=='password'){
                $(this).data('type','password').get(0).type='text';
            }
            $(this).val($(this).attr('placeholder'));
        }
    }).blur();
}