Hide Input

The wijinputmask widget allows you to use password characters so that the actual password or social security number doesn't appear on the screen. Use the passwordChar option to take advantage of this feature. See the InputMask > Password sample (http://demo.componentone.com/ASPNET/MVCExplorer/inputmask/Password) and InputMask > SSN sample (http://demo.componentone.com/ASPNET/MVCExplorer/inputmask/SSN) of the MVC Control Explorer live demo.

Create an ASP.NET MVC 5 Wijmo application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<input type="text" id="textbox1" />
<h6>Mask</h6>
<p>000-00-0000</p>
<h6>Password Char</h6>
<p>#</p>

<input type="text" id="textbox2" />
<h6>Mask</h6>
<p>CCCCCCC</p>
<h6>Password Char:</h6>
<p>*</p>

After the closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijinputmask widget and set the passwordChar options.

<script id="scriptInit" type="text/javascript">
            $(document).ready(function () {
                $("#textbox1").wijinputmask(

                {
                    mask: '000-00-0000',
                    passwordChar: '#',
                    hidePromptOnLeave: true
                });

                $("#textbox2").wijinputmask(
                {
                    mask: 'CCCCCCC',
                    passwordChar: '*',
                    hidePromptOnLeave: true
                });
      });
</script>

Press F5 to run the application and enter numbers in the first textbox. They are hidden by the '#' character. Enter numbers or letters in the second textbox. They are hidden by the '*' character.