Password show and hide with eye button using jQuery
By In this article, we will let you know how to put the password show and hide functionality by clicking on the eye icon using jQuery.
During creating a registration or login form generally, we have a password field in most cases. To make the user interface better we can use the password show and hide functionality.
Also, users want to see their typed password because in many cases users just get confused by a letter. Either they typed it right or wrong. So from the user’s perspective, it is also good to use password show and hide functionality by clicking on the eye icon.
We used the jQuery CDN, instead of downloading jQuery to implement the functionality of password show and hide using jQuery. You can either download jQuery or use the below CDN.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>We have also used the font awesome CDN to show the eye icon. CDN for font awesome is following as:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Full code to implement the functionality of password show and hide using jQuery is following as:
<!DOCTYPE html>
<html>
<head>
<title>Password Hide Show using jQuery</title>
</head>
<!-- This is font awsome cdn to use eye icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<!-- This is Password field -->
Password: <input type="password" id="passwordInputID" value="MyFakePassword">
<!-- This is eye button -->
<span style="border:1px solid #ddd;padding:0 2px;">
<i id="eyeChangeId" class="fa fa-eye" onclick="eyeEnableOrDisable()"></i>
</span>
</body>
<!-- Calling jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
//Javascript function definition
function eyeEnableOrDisable()
{
//getting type of the password field element by jQuery
var x = $('#passwordInputID').prop("type");
if (x === "password")
{
//changing input type text
$('#passwordInputID').prop("type", "text");
//removing fa-eye class
$('#eyeChangeId').removeClass('fa-eye');
//adding fa-eye-slash class
$('#eyeChangeId').addClass('fa-eye-slash');
}
else
{
//changing type passord
$('#passwordInputID').prop("type", "password");
//removinf fa-eye-slash class
$('#eyeChangeId').removeClass('fa-eye-slash');
//adding fa-eye class
$('#eyeChangeId').addClass('fa-eye');
}
}
</script>
</html>We just used jQuery to get the input field type and we changed it using the jQuery function. We also changed the eye icon by using the onClick event and changed the classes
If you also want to implement this functionality using complete JavaScript then follow our other article Password show and hide using javascript.
