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

css, html, javascript, passwords

Solution

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.

Problem

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.

Original source