Mask UnMask Input Text jQuery Html

Category > JQUERY || Published on : Thursday, February 11, 2016 || Views: 11292 || Mask UnMask Input Text jQuery Html


Introduction

Here Pawan Kumar will explain how to Mask UnMask Input Text jQuery Html

Description

In previous post I have explained How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET, Upload And Read Excel File into DataSet in Asp.Net using C#, How to find third highest salary in sql server., How to prevent input field from special character, How to display image on image selection using fileupload control in JQuery., Add TextBox Dynamically ASP.Net on Click ASP.Net Button, and many more articles.

Now I will explain How to Mask UnMask Input Text jQuery Html

So follow the steps to learn Mask UnMask Input Text jQuery Html

Mask UnMask Input Text jQuery Html

Complete ASPX Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery mask unmask password</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var inputTarget = document.querySelector('#inputPhone');
            $('input[type="checkbox"]').click(function () {
                if ($(this).prop("checked") == true) {
                    inputTarget.type = 'password';
                }
                else if ($(this).prop("checked") == false) {
                    inputTarget.type = 'text';
                }
            });
        });

        function GetValueTextbox() {
            alert($("#inputPhone").val());
        }
    </script>
</head>
<body>
    <div>
        <h1>Mask Unmask Input Text using jQuery with example</h1>
        <input type="password" value="admin" id="inputPhone" />
        <input type="checkbox" checked="checked" id="chkMask" />
        Mask/UnMask
    <br />
        <br />
        <input type="button" id="btnShow" value="Get Value" onclick="GetValueTextbox();" />
    </div>
</body>
</html>

 

Conclusion:

So, In this tutorial we have learned, Mask UnMask Input Text jQuery Html

Download Source Codes