jQuery: password field with readable label?

Question

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="text" - 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/

Answer 1

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.

Answer 2

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/

Answer 3

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".