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>

Thorazine

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

Tricho

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

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

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

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. – Alleris

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/

Casseycassi

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

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. – Casseycassi

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

@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. – Casseycassi

@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. – Casseycassi

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

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

@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! – Callender

@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. – Callender

@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 – Callender

Answer 3

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

http://jsfiddle.net/mNchn/

Mayhap

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

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

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 – Mayhap

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.

Dees

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

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. – Casseycassi

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. – Vociferous

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.

Winebibber

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. – Uncleanly

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

Lambkin

Answer 7

I had the same problem so i wrote a little plugin

$.fn.passLabel = function(){
var 
T = $(this),
P = T.find('input[type=password]'),
V = pass.val();

P.attr('type','text');
P.focus(function(){ 
if(V == "")
P.attr('type','password');
});
}

now you just call it for the from at it will find all input fields with the password attribute.

eg.

$('form').passLabel();

Wade

Answer 8

A bit late however same here, i was working on the issue too IE9 doesnot show the password placeholder as text, in almost all the answers on the internet some suggest changing the type some but if u do this u will have another issue on the login page like when you will see with double click on password field as its type changed to text from password, btw it works with prop. e.g. prop("type","password") if you want to change the type of an element.

on the other hand i think most answers come from a single solution its like focus and blur actions of elements. but when u apply this plugin other text fields will also be effected there is no specific or i can say generlized solution, i have still a minor issue on the login page with the password field but its showing the text correctly. anyway. here is how i have configured, copied,changed and/or another inherited anwers here.

(function($) {
    $.fn.placeholder = function() {
        $('input[placeholder], textarea[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() === input.attr('placeholder')) {
                if (input.prop("id") === "password") {
                    input.prop("type", "password");
                }
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() === '' || input.val() === input.attr('placeholder')) {
                input.addClass('placeholder');
                if (input.prop("type") === "password") {
                    input.prop("type", "text");
                }
                input.val(input.attr('placeholder'));
            }
        }).blur().parents('form').submit(function() {
            $(this).find('input[placeholder], textarea[placeholder]').each(function() {
                var input = $(this);
                if (input.val() === input.attr('placeholder')) {
                    input.val('');
                }
            });
        });
    };
})(jQuery);

still an active prolem ... :D

Abruption