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

击隐藏/显示密码输入项

 

演示

 

 

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