首页>>Jquery文字>>点击隐藏/显示密码输入项(2014-01-11)

点击隐藏/显示密码输入项

点击隐藏/显示密码输入项
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <figure>  
  2. <div class="login">  
  3. <input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">  
  4. <input class="login-field login-field-password" id="password-1" type="password" placeholder="Password">  
  5. </div>  
  6. <figcaption>Inner toggle styled as icon.</figcaption>  
  7. </figure>  
  8. <figure>  
  9. <div class="login">  
  10. <input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">  
  11. <input class="login-field login-field-password" id="password-2" type="password" placeholder="Password">  
  12. </div>  
  13. <figcaption>Password visible by default, toggle styled as text and shows on focus.</figcaption>  
  14. </figure>  
  15. <figure>  
  16. <div class="login">  
  17. <input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">  
  18. <input class="login-field login-field-password" id="password-3" type="password" placeholder="Password" value="example password">  
  19. <div class="login-option">  
  20. <input type="checkbox" id="show-password">  
  21. <label for="show-password">Show password</label>  
  22. </div>  
  23. </div>  
  24. <figcaption>Checkbox toggles password visibility.</figcaption>  
  25. </figure>  
  26.   
  27.   
  28. <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>  
  29. <!-- Include the plugin. Yay! -->    
  30. <script src="hideShowPassword.min.js"></script>    
  31. <script>  
  32.   
  33. // Example 1   
  34. $('#password-1').hideShowPassword({   
  35.   // Creates a wrapper and toggle element with minimal styles.   
  36.   innerToggle: true,   
  37.   // Makes the toggle functional in touch browsers without   
  38.   // the element losing focus.   
  39.   touchSupport: Modernizr.touch   
  40. });   
  41.   
  42. // Example 2   
  43. $('#password-2').hideShowPassword({   
  44.   // Make the password visible right away.   
  45.   show: true,   
  46.   // Create the toggle goodness.   
  47.   innerToggle: true,   
  48.   // Give the toggle a custom class so we can style it   
  49.   // separately from the previous example.   
  50.   toggleClass: 'my-toggle-class',   
  51.   // Don't show the toggle until the input triggers   
  52.   // the 'focus' event.   
  53.   hideToggleUntil: 'focus',   
  54.   // Enable touch support for toggle.   
  55.   touchSupport: Modernizr.touch   
  56. });   
  57.   
  58. // Example 3   
  59. $('#show-password').on('change', function () {   
  60.   // When the '#show-password' checkbox changes its value,   
  61.   // set the visibility of the password field to whatever   
  62.   // its 'checked' attribute is.   
  63.   $('#password-3').hideShowPassword($(this).prop('checked'));   
  64. });   
  65.   
  66. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_234.html