Posted By

galofre on 02/25/11


Tagged

password jquery focus TextField hint


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

uberdragon


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


 / Published in: PHP
 

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

  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. });

Report this snippet  

You need to login to post a comment.