HTML text field to behave like a password field

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 1

1. Use a regular password field
2. Don't abuse the value as a placeholder — it becomes invisible to, among others, screen reader users.
3. Put the label in a <label>
4. Position the label behind the input
5. Restyle the input with JS to change the background

Demo at http://dorward.me.uk/tmp/label-work/example.html

Answer 2

您可以使用HTML5 placeholder属性但是，这不适用于所有浏览器（尤其是较旧的浏览器）。

<input type="password" name="pwd" placeholder="Enter Password" />

Answer 3

将div或span标记悬停在文本（密码）字段上，然后在密码字段获得焦点或单击div / span时隐藏它。

Answer 4

Generally, browsers frown at changing the type attribute of input elements via JavaScript. Most workarounds involve cloning the input with the new type , and removing the original.

You could absolutely position the label over the input form, and remove it on focus.

You should consider the implications of not using type="password" - it is the semantically correct option.

Update

Upon reading David Dorward's answer , you should strongly consider his very valid points.

Answer 5

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!