title: Password input field change from text to password on focus/type?
body: <p>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 "•••••••".</p>
  
  <p>This is the code for the buttons:</p>
  
  <pre><code>&lt;form method="post" action="register_process.php"&gt;
      &lt;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"  /&gt;
      &lt;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"  /&gt;
      &lt;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"  /&gt;
      &lt;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"  /&gt;    &lt;br/&gt;
      &lt;input type="submit" class="button" value="JOIN!" name="join!"  /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>To see it action see here: <a href="http://jsfiddle.net/e458S/" rel="nofollow">http://jsfiddle.net/e458S/</a></p>
  
  <p>Thanks.</p>