Categories: JavaScript

Password show and hide with eye button using jQuery

password show and hide using jQuery

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.

password show and hide using jQuery

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" >

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.

91 TechSquare