How To Create Show Hide Password Using JQuery Or Javascript

Hello Friends, In this post you will learn how to create show hide password functionality using jQuery and you will also lean how to create show hide password functionality in javascript.

In the most of the website’s login and register page reducing type of error while entering password in textbox we can show password after entering password. If we show password then we can reduce type of error.

For showing password, I have used jquery. With the help of jquery we can show entering password and hide entering password on eye icon click event. I have used jquery attr() method for show and hide password. This functionality is very useful for any website login or registration page.

here is two example in this post, First you will used to jquery show hide password click on eye icon.This is the best for every website because it’s look professional.Second example you will learn show hide functionality to javascript.

HTML Page for show hide password functionality

index.php

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Show hide Password functionality using jquery or javascript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
  <body>
    <div class="container" style="margin-top:100px">
      <h2 class="text-center">Show hide Password functionality using jquery</h2>
      <div class="row justify-content-center">
        <div class="col-6">
          <form style="margin-top:30px">
            <div class="form-group">
              <label>Password</label>
              <div class="input-group" id="show_hide_password">
                <input class="form-control" type="password" placeholder="Password">
                <div class="input-group-append">
                  <a class="input-group-text" href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="container" style="margin-top:20px">
      <h2 class="text-center">Show hide Password functionality using javascript</h2>
      <div class="row justify-content-center">
        <div class="col-6">
          <form style="margin-top:30px">
            <div class="form-group">
              <label>Password</label>
              <input type="password" class="form-control" id="password" placeholder="Password"><br>
              <input type="checkbox" name="password" onclick="showPassword()"> Show Password
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

<!---Show hide Password functionality using jquery  --->
<script type="text/javascript">
  $(document).ready(function() {
    $("#show_hide_password a").on('click', function(event) {
      event.preventDefault();
      if($('#show_hide_password input').attr("type") == "text"){
          $('#show_hide_password input').attr('type', 'password');
          $('#show_hide_password i').addClass( "fa-eye-slash" );
          $('#show_hide_password i').removeClass( "fa-eye" );
      }else if($('#show_hide_password input').attr("type") == "password"){
          $('#show_hide_password input').attr('type', 'text');
          $('#show_hide_password i').removeClass( "fa-eye-slash" );
          $('#show_hide_password i').addClass( "fa-eye" );
      }
    });
  });


  // Show hide Password functionality using javascript
  function showPassword(){
      var pass = document.getElementById("password");
      if (pass.type ==="password") {
          pass.type = "text";
      }else{
          pass.type = "password"; 
      }
   }
</script>

Output

How to Create show hide password using jQuery or Javascript

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊