Problems with Password Fields

Question

So I've got a password field, with the value set to "Password." I've got some very simple javascript that sets the value to '' onfocus. I want the password to be blocked out, replaced with dots, as is usual. The problem is, if I make the field a password field, the original value, "Password," appears as dots. Is there any simple way to make the original value "Password" and the rest, after onfocus, dots? Or would I have to change the font after onfocus as well to a custom font that's only dots?

Here's my HTML:

<!DOCTYPE html>
<html>
<head>
    <title>SuM BUTtonsS DOe</title>
    <link rel="stylesheet" href="buttons.css"/>
</head>
<body>
    <p>Please enter the password.</p>
    <form>
        <input id="password" type="textbox" value="Password" onfocus="if (this.value=='Password') this.value='';" onblur="if (this.value=='') this.value='Password';"/>
    </form>
</body>
</html>

score 0 · Answer 1 · answered Apr 03 '15 at 15:32

0

It is will be more simple, just use type='password':

<input id="password" type="password" value="Password" />

answered Apr 03 '15 at 15:32

Legendary

2,243
16
26

Touffy · Accepted Answer · 2015-04-03T15:43:14.470

0

You don't need JavaScript for that. Use the placeholder attribute. Worst case, it's not supported and the field will just be empty. (It's widely supported now, though).

<input id="password" type="password" placeholder="Password">

edited Apr 03 '15 at 15:43

answered Apr 03 '15 at 15:33

Touffy

6,309
22
28

Just wondering, is there any way to change the color/transparency of the placeholder text? – Tommay Apr 03 '15 at 15:59
http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – Touffy Apr 03 '15 at 16:06

score 0 · Answer 3 · answered Apr 03 '15 at 15:36

The best way is to use placeholder as Toofy said in his answer.

If you want to do it in the way you started, change the type attribute to switch between text and password :

<input id="password" type="textbox" value="Password" onfocus="if (this.value=='Password') { this.value='';this.setAttribute('type','password')};" onblur="if (this.value=='') { this.value='Password';this.setAttribute('type','text'); }"/>

Fiddle here : http://jsfiddle.net/1y7Levr4/

Problems with Password Fields

3 Answers3