Question: I have a registration form, and i want to use a password field. The problem is, i want it to have a placeholder saying "Password" at the begining so i'm using a text field instead. I need to turn the characters into asterisks or black circles like a password field when the user starts typing.  

I've tried changing the "type" attribute to "password" through javascript, so i'm stuck.  

Is there a simple way to resolve this with css? or does anyone know of a good javascript(preferably jquery) to hack this?  

Thanks

Answer: 
Hover a `div` or a `span` tag over your text (password) field, then hide it when the password field takes focus or the div/span is clicked.
I had a similar problem, where I had the Value of the inputs as my labels, and when you clicked inside one, some Javascript would run, clearing the input. But on the password field, you needed to change the input type from "text" to "password", which works in browsers like Safari or Firefox, but not IE (IE doesn't support the setAttribute function very well). So I was killing myself trying to figure out how best to do this (IE conditionals, etc.)

I found this thread, and I think Quentin had the best idea. Not only because it works and should work in all browsers, but it also provides an actual Label in the code, which, Screenreaders aside, is good practice. Plus, you should always consider those who use screenreaders to some extent.

Here is the basics of the solution:
The HTML:

```
<label>Enter Password
<input type="password" name="password" class="input" /></label>

```

The jQuery (note: I am not a jQuery expert. This could probably be written better or more efficient, but for two fields, it works):

```
$("input[name=password]").focus(function() {
    var value = $("input[name=password]").val();
    if(value == "") {
        $(this).toggleClass("inputBg");
    }
});

$("input[name=password]").blur(function() {
    var value = $("input[name=password]").val();
    if(value == "") {
        $(this).toggleClass("inputBg");
    }
});

```

The CSS starts with the Label tag, styled the same as your input class, with a position relative and display block added. Then there are two classes for the input. One that is the correct width, height, etc. positioned absolute, with a higher z-index than the label, BUT WITH NO BACKGROUND. The second class is exactly the same, but WITH THE BACKGROUND. 

The jQuery just toggles between the two classes, so you'll see the label under the input, but when you click on the input, the background appears and you can type in text on top of it. Works great, should work in all browsers (although only tested in Safari on Mac and IE/Firefox on Windows). Nice idea Quentin!