Question

56

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

rated 0 times [ 60] [ 4] / answers: 1 / hits: 16515 / 11 Years ago, fri, march 8, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

desiraeleandrah

Add To Favorites

Follow

Total Points: 202

Total Questions: 111

Total Answers: 115

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

desiraeleandrah questions

1 How to create a gradient fill line chart in latest Chart JS version (3.3.2)?

Wed, Jun 2, 21, 00:00, 3 Years ago

1 e.preventDefault() not working in 100% cases

Thu, Nov 19, 20, 00:00, 4 Years ago

1 Jest testing of dispatchEvent with CustomEvent

Wed, Nov 11, 20, 00:00, 4 Years ago

1 NextJS rewrites in production

Wed, Oct 14, 20, 00:00, 4 Years ago

1 Image not loading when passing a prop to < img src=this.prop. /> in React

Tue, Mar 31, 20, 00:00, 4 Years ago

View All

answered 12 Years ago ronaldo · Accepted Answer

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.