Learning jQuery

Showing password as and when user is typing is you see a lot these days on various smart phones app and mobile device specific websites. As it gives indication of what user is typing on small devices where keys can be mixed easily. So in this post, you will find the solution of how to implement the same feature using jQuery and without any jQuery plugin. So let’s start.

HTML Code

First, let’s see the html part. Define a span element just below your password input control or you may also have next to it. Place the span as per your design requirement and keep it hidden. And also define a checkbox with default state to checked.

Password: <input type="password" id="txtPassword" />
<span id="spnPassword" style='display:none;'></span>
<input type="checkbox" id="chkShow" checked />Show Password

jQuery Code

On jQuery side, attach a keyup event on the password input control. This keyup event first checks if show password checkbox is checked. If yes, then copy the password control value to span and display it. Otherwise hide the span element.

 $('#txtPassword').keyup(function () {
     var isChecked = $('#chkShow').prop('checked');
     if (isChecked) {
         $('#spnPassword').html($(this).val());
         $('#spnPassword').show();
    }
     else $('#spnPassword').hide();
 });

Another thing we need to do is to show/hide the span element based on checkbox status. So attach a change event to checkbox and based on its checked status show/hide the span.

$('#chkShow').change(function () {
        var isChecked = $(this).prop('checked');
        if (isChecked) {
            $('#spnPassword').show();
        } else {
            $('#spnPassword').hide();
        }
    });

So complete code is,

$(document).ready(function () {
    $('#txtPassword').keyup(function () {
        var isChecked = $('#chkShow').prop('checked');
        if (isChecked) {
            $('#spnPassword').html($(this).val());
            $('#spnPassword').show();
        } 
        else $('#spnPassword').hide();
    });
    $('#chkShow').change(function () {
        var isChecked = $(this).prop('checked');
        if (isChecked) {
            $('#spnPassword').show();
        } else {
            $('#spnPassword').hide();
        }
    });
});