Question

I try to do a form with the information in the same input. It works fine in all the inputs but in the password it would be better if it could change to points when the user introduces the password. I want it to be type text and change to type password ONLY when the user introduces the password. The problem is in the last line of code:

I have it life here: http://jsfiddle.net/Nt9gx/

<form> 

<input type="text" name="name" value="name" 
    onfocus="if (this.value=='name') this.value = '';" 
    onblur="if (this.value=='') this.value = 'name';"  
/>

<input type="text" name="password" value="password"   
    onfocus="if (this.value=='password') this.value = '' type = password;" 
    onblur="if (this.value=='') this.value = 'password';"
           "if (this.value!=''|| 'password') type = password ;" 
/>

</form>

Answer 1

Use the HTML5 placeholder

To get the job done, you should simply use the HTML5 placeholder-attribute, like this:

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

As this will:

• show the placeholder, while no text is inserted or if all text is removed again
• it shows the text even on a password field
• no need using JavaScript

By the way:

• you used two times onblur on the last input, this should occur only once
• the last line is syntactically wrong, as you need to escape the word password in ' (single quotes) instead of " (double quotes) (question was updated)
• the last line uses an undefined variable called password in || password)
• use type="password" for input fields that handle, well, passwords, as the input will be “invisible”

Note:

If you still want to use JavaScript, you have to change the input from type="text" to type="password" within the focus and blur events by simply updating the type-attribute.

This is how you can do it:

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

Demo: http://jsfiddle.net/2Ps8N/​