CODEWITHSUNDEEP
htmlformspasswords
blanksby
blanksby

Reputation: 17

How to make the type of input password when the user actually selects the input box?

This is the code I have already. When the box is inactive it displays the text"Password". I would like when the box is selected it removes the "Password" text and displays the users input as dots like a password field. 

<div class="custom"><input type="text" class="custom" size="12" value="Password" onfocus="if(this.value == 'Password') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Password'; }"/></div>

Upvotes: 0

Views: 288

Answers (3)

Dave
Dave

Reputation: 143

You should start by setting the type of the input to 'password'. If you want to display a label for the field in the value, i would recommend using the JQuery watermark. It effectively does what i believe you are attempting to code out, but won't ever submit the word 'Password' as the value of the form field.

Upvotes: 0

Jason Larke
Jason Larke

Reputation: 5609

You can change the type via JS the same way you've changed the value:

<input type="text" class="custom" size="12" value="Password" onfocus="if(this.value == 'Password') { this.type = 'password'; this.value = ''; }" onblur="if(this.value == '') { this.type = 'text'; this.value = 'Password'; }"/>

Upvotes: 2

orourkek
orourkek

Reputation: 2101

If i understand correctly, you're just looking for:

this.type = 'password'

and conversely:

this.type = 'text'

Upvotes: 0

Related Questions