Show and Hide Password Field with jQuery and 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.


Let us see snippet.

Live Character Count Using JavaScript

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;
            }

Live Demo

[sociallocker] Download Script[/sociallocker]