Quick Start

In this quick start, you'll learn how to add two wijinputmask widgets to a Web page and customize the appearance and behavior of the widgets. For the first widget, we create some initial text with the placeholder option and create a drop-down list using the pickers option list attribute. For the second widget, we use the maskFormat and passwordChar options to create a Social Security Number textbox.

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
Paste in your favorite text editor.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in your favorite text editor.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

References	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20161.90.js" type="text/javascript"></script>

References

Copy Code

<!--jQuery References--> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20161.90.js" type="text/javascript"></script>

Add the following markup within the <body> tags to create two widgets. The <input> elements create the widgets, and we call their id attributes in jQuery to initialize them.
Drop down and copy markup to paste inside the body tags
Markup
Copy Code

<input type="text" id="textbox1" /> <br> <h3>Enter your SSN:</h3> <input type="text" id="textbox2" />

Markup	Copy Code
<input type="text" id="textbox1" /> <br> <h3>Enter your SSN:</h3> <input type="text" id="textbox2" />

Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data.

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputnumber( { showTrigger: true, pickers: { list: ['100', '200', '300'] }, placeHolder: 'Click the arrow' }); $("#textbox2").wijinputmask( { maskFormat: "000-00-0000", passwordChar: '*' }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $("#textbox1").wijinputnumber(
        {
            showTrigger: true,
            pickers: {
                list: ['100', '200', '300']
            },
            placeHolder: 'Click the arrow'
        });
        $("#textbox2").wijinputmask(
        {
            maskFormat: "000-00-0000",
            passwordChar: '*'
        });

    });
</script>

Save your HTML file and open it in a browser. The widget appears like the following live widget. The null text Click the arrow appears in the first textbox. If you click the arrow, the combo items appear in the drop-down list. Enter some numbers in the second textbox. The password character is used to hide the numbers.

Concepts

Mask Types

Reference

show Drop down Option