Advanced Search

jQuery: show plain text in a password field and then make it a regular password field on focus

/ Published in: PHP
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The HTML
  2.  
  3. <form>
  4. <div>
  5.     <input class="default-value" type="text" name="email" value="Email Address" />
  6. </div>
  7. <div>
  8.     <input id="password-clear" type="text" value="Password" autocomplete="off" />
  9.     <input id="password-password" type="password" name="password" value="" autocomplete="off" />
  10. </div>
  11. </form>
  12.  
  13.  
  14.  
  15. The CSS
  16. #password-clear {
  17.     display: none;
  18. }
  19.  
  20.  
  21.  
  22.  
  23. The jQuery
  24. $('#password-clear').show();
  25. $('#password-password').hide();
  26.  
  27. $('#password-clear').focus(function() {
  28.     $('#password-clear').hide();
  29.     $('#password-password').show();
  30.     $('#password-password').focus();
  31. });
  32. $('#password-password').blur(function() {
  33.     if($('#password-password').val() == '') {
  34.         $('#password-clear').show();
  35.         $('#password-password').hide();
  36.     }
  37. });

URL: http://www.electrictoolbox.com/jquery-toggle-between-password-text-field/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.