Dynamically add a show/hide eye icon to all password fields using jQuery

This simple changes are highly demanded in current user interfaces. UI developers used to prefer to add separate class and scripts for all password field throughout a page or site. But this can be easily done with a simple lines of code.

So let’s start.

1. For this lets consider a HTML page having multiple password fields.
2. We need a icon, I preferred to use font-awesome fa-eye and fa-eye-slash to toggle between them. 
3. Will use jquery so add jquery.min in the head part.
4. A custom css.
5. A custom jquery script.

<form action="#">
  <div class="form-group">
    <label>Current password:</label>
    <input type="password" class="form-control" id="current_password">
  </div>
  <div class="form-group">
    <label>New Password:</label>
    <input type="password" class="form-control" id="new_password">
  </div>
  <div class="form-group">
    <label>Confirm Password:</label>
    <input type="password" class="form-control" id="confirm_password">
  </div>
  <button type="submit" class="btn btn-default">Reset Password</button>
</form>

Form output will be look like below,

Current password:

New Password:

Confirm Password:

Reset Password

Now, we will dynamically add below <span> element below each password element,

<span toggle=”#<id of password field>” class=”fa fa-fw eye-icon toggle-password fa-eye”></span>

So, we will be doing this dynamically for all password fields with the below script.

$(function(){
    $("input[type='password']").each(function(){
        var id = $(this).attr('id');
        $('<span toggle="#'+id+'" class="fa fa-fw eye-icon toggle-password fa-eye"></span>').insertAfter(this);
    });
});

Current password:

New Password:

Confirm Password:

Reset Password

Now we will add the below style to align them.

.toggle-password {
    float: right;
    margin-right: 5px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

Current password:

New Password:

Confirm Password:

Reset Password

Let’s add a jQuery script so that this button will toggle the current password box to text box and vice versa. Also we will toggle the eye icon in same script.

$(".toggle-password").on('click',function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password"){
        input.attr("type", "text");
    } 
    else {
        input.attr("type", "password");
    }
});

Here we have used on(‘click’) instead of click(). As we are passing the eye icon dynamically to the page click() will not work so used on(‘click’). Here is our final output.

Our Final Output

Current password:

New Password:

Confirm Password:

Reset Password

Thanks for reading! If you have any doubt regarding this feel free to add in the comment.