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>

score 16 · Answer 1 · answered Jun 08 '11 at 22:57

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

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(); } — Matt Hall, Feb 08 '12 at 22:35
with modernizr and its if (!Modernizr.input.placeholder) it is great — kajo, Sep 07 '12 at 09:27
How do you adress the password-placeholder must not show as stars issue? — Frank N, Aug 21 '13 at 10:16
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. — Phil, Feb 06 '14 at 14:29

score 4 · Answer 2 · answered May 19 '11 at 01:21

4

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/

answered May 19 '11 at 01:21

Jeremy

22,188
4
68
81

@Jeremy, check my updated question for the input field. This works decent, but when you select something else, it doesn't come back.. – JD Audi May 19 '11 at 01:28
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. – Jeremy May 19 '11 at 01:33
@jeremy, im not sure how to incorporate that into my script.. Im not that great with jquery yet.. – JD Audi May 19 '11 at 01:48
1

@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 May 19 '11 at 19:46
@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 May 19 '11 at 19:53
@Wesley: If that's the case, I would say the whole idea of having a "placeholder" field (with HTML) is rather illogical. – Jeremy May 20 '11 at 03:25
@Jeremi Heiler, Hey Jeremy, this is very clever solution. It works like a charm! Thank you! +1 – GTodorov Aug 06 '15 at 21:54
@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 Aug 06 '15 at 22:08
@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 Aug 06 '15 at 22:08
@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 – GTodorov Aug 08 '15 at 05:19

score 2 · Answer 3 · answered May 19 '11 at 19:41

2

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

http://jsfiddle.net/mNchn/

answered May 19 '11 at 19:41

kei

20,157
2
35
62

ie7 and above. I haven't bothered checking anything below. – kei May 24 '11 at 22:08
aren't you just manually positioning a span over the box.. is that correct? – JD Audi May 24 '11 at 22:18
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: http://jsfiddle.net/f5fYc/ – kei May 24 '11 at 22:24

score 1 · Answer 4 · answered Aug 26 '13 at 16:55

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

score 1 · Answer 5 · answered May 19 '11 at 00:55

1

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:

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.
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.
Make it so that the LABEL is only visible when some CSS class (.showMe, for example) is applied to it.
Use JavaScript to hide the LABEL
- ...if the INPUT's value is an empty string
- ...or if the user has selected (focused) the INPUT.

answered May 19 '11 at 00:55

DavidJCobb

1,081
7
9

@Too complicated, and will be tough to maintain when we make changes.. Thanks though, I will keep in mind – JD Audi May 19 '11 at 00:58
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. – Jeremy May 19 '11 at 01:06
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. – eselk Dec 05 '12 at 02:34

score 1 · Answer 6 · answered Jun 08 '11 at 23:24

1

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.

answered Jun 08 '11 at 23:24

Wex

15,539
10
64
107

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. – Clarus Dignus Jul 12 '14 at 19:32

score 0 · Answer 7 · 2014-10-17T05:52:54.790

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

score 0 · Answer 8 · answered Sep 12 '11 at 01:58

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

Showing Placeholder text for password field in IE

8 Answers8

Linked