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.