loading...

Password show hide

Category: HTML, jQuery

In our registration form or any other form where need password input field there need to show or hide option of passwords. Demo

HTML

<div class="show-hide">
<span>Passwords</span>
<input id="password-field" type="password" class="form-control"
name="password" value="secret">
<i toggle="#password-field" class="fas fa-eye-slash"></i>
</div>

jQuery

  $(document).ready(function(){
    $(".fa-eye-slash").click(function() {
          $(this).toggleClass("fa-eye-slash fa-eye");
          var input = $($(this).attr("toggle"));
          if (input.attr("type") == "password") {
            input.attr("type", "text");
          } else {
            input.attr("type", "password");
          }
        });
  }); 

Leave a Reply

Your email address will not be published.