Password input field change from text to password on focus/type?

Question

I have a sign up form where the titles of the inputs are in the text box, and when you click on the box, the text disappears, but on the password i want the preview text to remain as "password" and not "••••••••". BUT when the user clicks on the text box should clear out the text, and their entered text should apear as "•••••••".

This is the code for the buttons:

<form method="post" action="register_process.php">
    <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
    <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
    <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD';}" name="password"  />
    <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM';}" name="password_confirm"  />    <br/>
    <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

All else works fine but I would like the users passwords not to show up. Also for now I have left the password fields as text.

To see it action see here: http://jsfiddle.net/e458S/

Thanks.

Solution 1

You can use javascript setAttribute

<form method="post" action="register_process.php">
   <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
   <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
   <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD') {this.value = ''; setAttribute('type', 'password');}"   onblur="if (this.value == '') {this.value = 'PASSWORD';setAttribute('type', 'text');}" name="password"  />
   <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = ''; setAttribute('type', 'password');}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM'; setAttribute('type', 'text');}" name="password_confirm"  />   <br/>
   <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

Example here

Finally I found one mistake, when password is typed, and before it I change the focus to another field, and returning back to password, the field clears. It's from onclick="this.value=''"; if You want to handle event onclick just remove this.value='' because it works on onfocus, or just add the condition if(this.value=='password'), otherwise if use onclick event same as onfocus, better remove the onclick event handler, onfocus is enough.

Solution 2

Keeping in mind the following:

• Password fields should be of input type='password', which allows the browser to apply different security considerations (such as not allowing copying). In addition, touch devices may selectively offer to show/hide the password for usability purposes.

• Preferably, scripts should not be inline. Instead, prefer unobtrusive JavaScript which attaches itself to the appropriate elements.

• People use all sorts of input mechanisms.

I suggest the HTML placeholder attribute with feature detection to allow you to modify the display if placeholder is not supported.

Simple example: http://jsfiddle.net/fbw7j/3/

<input type="password" placeholder="enter a password">

// feature detection using the Modernizr library
if(!Modernizr.input.placeholder){
    // alter your markup
    $("input[type=password]").after("<span>Password</span>");
}

Comments

[Daedalus]

.. Ha. I was going to offer the same library, but couldn't figure out how to make it work in IE9.