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>

Solution 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;
    }

Solution 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/

Solution 3

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

http://jsfiddle.net/mNchn/

Solution 4

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.

Solution 5

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();
}

View more solutions

Comments

[JD Audi]

@Too complicated, and will be tough to maintain when we make changes.. Thanks though, I will keep in mind

[Jeremy]

I used this technique last year to implement a custom file-upload textfield, and it worked great. However, that was the only option. I'm sure there's a cleaner way to do this.

[JD Audi]

@Jeremy, check my updated question for the input field. This works decent, but when you select something else, it doesn't come back..

[Jeremy]

If you want it to come back, you would just have to go one level deeper and add a focus event handler to the new password text field. I know, there is still some house-keeping to do, but it might not be so bad.

[JD Audi]

@jeremy, im not sure how to incorporate that into my script.. Im not that great with jquery yet..

[Jeremy]

@Wesley: You need to re-read what is going on. @JD wants the textfield to say "Password" not "********", and then when the user clicks on the textfield, it turns into a password field.

[Jeremy]

@Wesley: @JD wanted simpler, so I gave him simpler. The fact that it is a password field originally or not doesn't really mater. The only security it provides is visibility.

[Jeremy]

@Wesley: If that's the case, I would say the whole idea of having a "placeholder" field (with HTML) is rather illogical.

[kei]

ie7 and above. I haven't bothered checking anything below.

[JD Audi]

aren't you just manually positioning a span over the box.. is that correct?

[kei]

Yeah, but you don't need the spans or the div for that matter. (Just a specification I had to deal with for mine) Redone w/o the div and spans: jsfiddle.net/f5fYc

[Matt Hall]

This is working well for me, one small addition I made was to not show the faux field if there was a value for the field. This helps in places where validation fails and you're reloading the form or something. Add something like: if ($input.val() === '') { $faux.show(); $input.hide(); }

[kajo]

with modernizr and its if (!Modernizr.input.placeholder) it is great

[eselk]

Sounds like a great idea on the surface, but keep in mind some browsers (current version of Firefox I have) don't focus the field when the label is clicked. So if the label is over the field, that could be a problem in those browsers, unless you handle the click event too -- but then not such a simple solution.

[Frank Nocke]

How do you adress the password-placeholder must not show as stars issue?

[Phil]

This is a great little function. @Fronker this function creates a "faux" standard input to sit in front of the password (or other) field and act as placeholder. When you click into it, it switches to the "real" input field, whether password or text.

[Clarus Dignus]

For all the difficulty I've been having with older IE versions, placeholders and password fields combined, this is actually a great time-saving fix. Ultimately, is fulfills the same requirement as a placeholder. Thanks.

[GTodorov]

@Jeremi Heiler, Hey Jeremy, this is very clever solution. It works like a charm! Thank you! +1

[GTodorov]

@Welsey, The Jeremy solution requires some touch ups, but you can't do any jQuery with zero knowledge. What's important here is the idea, not a complete solution. After all everyone before coming here should and must do homework. No one is supposed to work for you for free and write you a complete solution.The MARKUP doesn't work! Did you test IE7, IE8, any others at all? It's called browser support! It's dirty and ugly, but you can talk about HTML5 and placeholder may be some time in the future! Not now... just yet!

[GTodorov]

@Wesley Murch As Jeremy mentioned it provides visibility for the password field's placeholder. If you would like to discuss and pursue teaching and best practices, I think Microsoft is the company for you to work at. If it wasn't for their products, we wouldn't had to have this discussion right now.

[GTodorov]

@Wesley I understand. Just FYI, I did not wanted to offend your professionalism! Just didn't like the attitude. Everyone is seeking help and we help each other. It seems that you have grown as a professional! +1 for that! I do my best not to copy other bad attitudes, not that there weren't times when I wanted to, I just somehow was holding myself. Congratulations again on your ironed out professionalism = +1