jQuery: password field with readable label?

I wrote this very simple function for my current project called insidelabel() that let's me add a description (label) for an input field inside of the input.

//Label inside of inputfields
function insidelabel(selector, name) {
    $(selector).val(name);
    $(selector).css({'color':'#999'});

    $(selector).focus(function () {
        //Input Value
        if ($(this).val() == name) { $(this).val(''); }
        $(this).css({'color':'#000'})
    });

    $(selector).blur(function () {
        if ($(this).val() == '') { $(this).val(name); }
        if ($(this).val() == name) {
            $(this).css({'color':'#999'});
        }
    });
}

insidelabel('.t', 'name');
insidelabel('.p', 'enter password');

So when an input is focused the text disappears and when it blurs it has the same text again.

<form method="get" action="">
    <input type="text" class="t" value="" /><br/>
    <input type="password" class="p" value="" />
</form>

However now I wonder how I could extend that function to have a label inside of password fields as well! Sounds weird... Explanation: I want a password field (with type="password") to have a readable label (like "enter password") inside of it. Once the user enters text the password should be unreadable (dotted). Really bad explanation, I know, but I think you might get what I mean.

I wonder what's the best way to do that? Should I query if an input field is type="password" and if so I set it to type="tex开发者_Go百科t" - once text is entered I set it back to type="password" again. Any idea what's the best solution for that?

Here is my example: http://jsfiddle.net/R8Zxu/

If you use a real <label> positioned under the (transparent) <input> instead of faking it with the value attribute (which has some major accessibility implications) then you can do something like: http://dorward.me.uk/tmp/label-work/example.html

Don't try to change the type of an existing input. Internet Explorer won't let you.

OK for web applications, but if you want to use page on iPhone application then it does not works properly, for correct answer see refer this - http://blog.stannard.net.au/2011/01/07/creating-a-form-with-labels-inside-text-fields-using-jquery/

Yes, that would be the right approach. This is known as a 'watermark' on a text field, and since password input fields use a different text display mechanism, when the watermark is active, you would want to switch it to a text type. OnFocus, you would switch it out (and if needed) focus on the new text field.

Just remember, you'll want to do the conversion to a type="text" before messing with the value; there are restrictions when it is a type="password".