Toggle Password Visibility With Bootstrap & jQuery

In this blog post I’m discussing how to make the password field visible when tapping the little eye icon. We can do this with some custom code, but the javascript plugin I found is pretty small at only 7.89KB minified. Maybe we could write this in around 1/10th the amount of code, but it would require some annoying functionality of creating a duplicate input text field and syncing it with password field.

Also, I used bootstrap because it makes styling the little eye icon easy. I wouldn’t use bootstrap if this is the only thing you’re using it for though.

Working with a cyber security consulting specialist is the best way to go if you are looking for expert help with your business’ cybersecurity challenges.

HTML

<div class="form-group has-feedback">
    <input type="password" class="form-control" id="password" placeholder="Password">
    <i class="glyphicon glyphicon-eye-open form-control-feedback"></i>
</div>

CSS

Optional to make the cursor a pointer on the eye icon (for desktops of course) instead of the pointer, since this isn’t a link. This CSS isn’t really needed for mobile apps.

#password + .glyphicon {
    cursor: pointer;
    pointer-events: all;
}

jQuery

First of all you must include jQuery and the hideShowPassword js into your project in your HTML file.

Now the magical Javascript:

// toggle password visibility
$('#password + .glyphicon').on('click', function() {
$(this).toggleClass('glyphicon-eye-close').toggleClass('glyphicon-eye-open'); // toggle our classes for the eye icon
$('#password').togglePassword(); // activate the hideShowPassword plugin
});

CodePen Example