Show / Hide Password at Log-In Using Eye Icon – HTML & JavaScript

Show Hide Password at Log-In Using Eye Icon - HTML & JavaScript

A small yet very helpful feature on any web login page is to be able to see the password you are typing in. Thankfully, it is very easy to implement the feature to show/hide passwords on a login box using JavaScript.

The code below assumes that you have referenced FontAwesome in your file/project to be able to show the eye icons. You can always choose to go with other icons instead of FotnAwesome.

The Password Input Element

<input required="" name="password" type="password" id="password"
                                                    class="form-control" placeholder="Password">
                                                <i class="fa fa-eye" aria-hidden="true" id="showHidePassword"
                                                    style="position: absolute; font-size:20px; right: 50px;
                                                    top: 45%; cursor: pointer;"></i>

The JavaScript To Show/Hide Password

const showHidePass = document.getElementById('showHidePassword');
        const userPassword = document.getElementById('password');

        showHidePass.addEventListener('click', function(e) {
            let showHideAttr = userPassword.getAttribute('type');

            if (showHideAttr === 'password') {
                showHideAttr = 'text';
            } else {
                showHideAttr = 'password';
            userPassword.setAttribute('type', showHideAttr);

That’s it!

Pretty simple, isn’t it?

Share This Post

Leave a Comment

Your email address will not be published. Required fields are marked *

Subscribe To my Future Posts

Get notified whenever I post something new

More To Explore