Home

Show and Hide Password Field with jQuery and JavaScript

Published on 17th Mar 2018 in JavaScript

In this tutorial, we will see how to show and hide password field with jQuery and JavaScript. This tutorial demonstrates the functionality of how to toggle password input field visibility. You have seen in many sites, password visibility option means you can see password while you are writing.

This example will help you to understand how to make password visible when you are writing. First we check for current input attribute type and if it is password then changing it to text. if attribute is text changing it to password. that's it.

Show and Hide Password Field with jQuery and JavaScript
Let us see snippet.

 

Using jQuery

HTML

<div class="container">
      <h1>Show and Hide Password Field with jQuery</h1>
        <div class="col-md-4">
            <div class="form-group">
                <label>Username:</label>
                <input type='text' id='username' class="form-control"></div>

            <div class="form-group">
                <label>Password:</label>
                <input type="password" id="password" value="demo" class="form-control"><span id="toggle" class="fa fa-fw fa-eye pass-icon" ></span>
            </div>

        </div>
    </div> 

jQuery

<script>
//jquery
$(document).ready(function () {

    $("#toggle").click(function () {

        if ($("#password").attr("type") == "password")
        {
            //Change type attribute
            $("#password").attr("type", "text");
        } else
        {
            //Change type attribute
            $("#password").attr("type", "password");
        }
    });

});
</script> 

CSS

.pass-icon
            {
                float: right;
                margin-top: -28px;
                position: relative;
                z-index: 5;
                font-size:20px;
            }

 

Using JavaScript

HTML

<div class="container">
    <h1>Show and Hide Password Field With JavaScript</h1>
    <div class="col-md-4">
        <div class="form-group">
            <label>Username:</label>
            <input type='text' id='username' class="form-control"></div>

        <div class="form-group">
            <label>Password:</label>
            <input type="password" id="password" value="demo" class="form-control"><span id="toggle" class="fa fa-fw fa-eye pass-icon" onclick="showhide();"></span>
        </div>

    </div>
</div>

JavaScript

<script>
    function showhide() {

        var type = document.getElementById("password").getAttribute("type");

        if (type == "password")
        {
            //Change type attribute
            document.getElementById("password").setAttribute("type", "text");
        } else
        {
            //Change type attribute
            document.getElementById("password").setAttribute("type", "password");
        }

    }
</script> 

CSS

.pass-icon
            {
                float: right;
                margin-top: -28px;
                position: relative;
                z-index: 5;
                font-size:20px;
            }

Share It
Stay Connected
Like Us on Facebook