JQuery Hide and Show Password using Eye Icon Example

By Hardik Savani June 12, 2023 Category : jQuery

Hey Dev,

Here, I will show you jquery password hide show eye icon. we will help you to give an example of show/hide password eye icon html jquery. We will look at an example of hide/show password using eye icon in html and jquery. I explained simply step by step how to show and hide password when click on eye icon using jquery. Let's see below example how to show and hide password using eye icon using jquery.

Here, we will use bootstrap 5, jquery and font-awesome icon to create simple example jquery Show and Hide Password using Eye Icon. so, let's see the simple example with output:

index.html

Read Also: How to Allow Only 4 Digits Numbers in Textbox using JQuery?
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JQuery: Show Hide Password with EYE Icon in Input - ItSolutionStuff.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style type="text/css">
        h4{
          text-align:center;
        }
        .container form{
          width:250px;
          margin:20px auto;
        }
        i{
          cursor:pointer;
        }
    </style>
</head>
<body>
  
<div class="container">
  <h4>JQuery: Show Hide Password with EYE Icon in Input - ItSolutionStuff.com</h4>
  <form class="form-inline">
    
      <label class="sr-only" for="password">Password</label>
      <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1"><i class="fa fa-eye-slash" id="eye"></i></span>
          <input type="password" class="form-control" placeholder="Password" aria-label="Password" aria-describedby="basic-addon1" id="password">
        </div>
  
    </form>
</div>
  
</body>
  
<script type="text/javascript">
      
    $(function(){
    
      $('#eye').click(function(){
             
            if($(this).hasClass('fa-eye-slash')){
                 
              $(this).removeClass('fa-eye-slash');
                
              $(this).addClass('fa-eye');
                
              $('#password').attr('type','text');
                  
            }else{
               
              $(this).removeClass('fa-eye');
                
              $(this).addClass('fa-eye-slash');  
               
              $('#password').attr('type','password');
            }
        });
    }); 
  
</script>
</html>

Output

I hope it can help you...

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts