Article

Show Hide Password with EYE Icon in TextBox using jQuery

In this article we will learn how to show hide Password using EYE Icon in TextBox with jQuery.

The EYE Icon will be created using Font-Awesome Fonts and will be displayed next to TextBox.

When the user will be clicked on EYE Icon, the TextBox will be toggled from Password TextBox to a Normal TextBox and vice versa respectively showing and hiding the Password Text.

Show Hide Password with EYE Icon in TextBox using jQuery

CSS Code

<style type=”text/css”>
input, input[type=password] {
width: 150px;
height: 20px;
}

#toggle_pwd {
cursor: pointer;
}
</style>

HTML Code

<body>
<div>
<label>Enter Password :</label>
<input type=”password” id=”txtPassword” />
<span id=”toggle_pwd” class=”fa fa-fw fa-eye field_icon”></span>
</div>
</body>

Script Code

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(function () {
$(“#toggle_pwd”).click(function () {
$(this).toggleClass(“fa-eye fa-eye-slash”);
var type = $(this).hasClass(“fa-eye-slash”) ? “text” : “password”;
$(“#txtPassword”).attr(“type”, type);
});
});
</script>

Complete Code

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

<link href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”
rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
$(function () {
$(“#toggle_pwd”).click(function () {
$(this).toggleClass(“fa-eye fa-eye-slash”);
var type = $(this).hasClass(“fa-eye-slash”) ? “text” : “password”;
$(“#txtPassword”).attr(“type”, type);
});
});
</script>
<style type=”text/css”>
input, input[type=password] {
width: 150px;
height: 20px;
}

#toggle_pwd {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<label>Enter Password :</label>
<input type=”password” id=”txtPassword” />
<span id=”toggle_pwd” class=”fa fa-fw fa-eye field_icon”></span>
</div>
</body>
</html>

Output
show-hide-password-with-eye-icon-in-textbox-using-jquery

Leave a Reply

Your email address will not be published.