Html Text Field To Behave Like A Password Field

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.

Solution 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

Solution 2:

You could use the HTML5 placeholder attribute However, that will not work in all browsers (especially older ones).

<inputtype="password" name="pwd" placeholder="Enter Password" />

Solution 3:

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.

Solution 4:

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
<inputtype="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!