点击密码的显示和隐藏

<figure>  
<div class="login">  
<input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">  
<input class="login-field login-field-password" id="password-1" type="password" placeholder="Password">  
div>  
<figcaption>Inner toggle styled as icon.figcaption>  
figure>  
<figure>  
<div class="login">  
<input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">  
<input class="login-field login-field-password" id="password-2" type="password" placeholder="Password">  
div>  
<figcaption>Password visible by default, toggle styled as text and shows on focus.figcaption>  
figure>  
<figure>  
<div class="login">  
<input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off">  
<input class="login-field login-field-password" id="password-3" type="password" placeholder="Password" value="example password">  
<div class="login-option">  
<input type="checkbox" id="show-password">  
<label for="show-password">Show passwordlabel>  
div>  
div>  
<figcaption>Checkbox toggles password visibility.figcaption>  
figure>  


<script type="text/javascript" src="../../js/jquery-1.9.1.min.js">script>  
    
<script src="hideShowPassword.min.js">script>    
<script>  

// Example 1   
$('#password-1').hideShowPassword({   
  // Creates a wrapper and toggle element with minimal styles.   
  innerToggle: true,   
  // Makes the toggle functional in touch browsers without   
  // the element losing focus.   
  touchSupport: Modernizr.touch   
});   

// Example 2   
$('#password-2').hideShowPassword({   
  // Make the password visible right away.   
  show: true,   
  // Create the toggle goodness.   
  innerToggle: true,   
  // Give the toggle a custom class so we can style it   
  // separately from the previous example.   
  toggleClass: 'my-toggle-class',   
  // Don't show the toggle until the input triggers   
  // the 'focus' event.   
  hideToggleUntil: 'focus',   
  // Enable touch support for toggle.   
  touchSupport: Modernizr.touch   
});   

// Example 3   
$('#show-password').on('change', function () {   
  // When the '#show-password' checkbox changes its value,   
  // set the visibility of the password field to whatever   
  // its 'checked' attribute is.   
  $('#password-3').hideShowPassword($(this).prop('checked'));   
});   

script>  

你可能感兴趣的:(练习)