JQuery Hide and Show Password using Eye Icon Example
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
<!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...
