Wijmo UI for the Web
Quick Start
Wijmo User Guide > Widgets > Input Widgets > InputMask > 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.

  1. 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>
    
  2. 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.

    Drop down and copy references to paste inside the head tags

    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>
    
  3. 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" />
  4. Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data.

    Drop down and copy script to paste inside the head tags

                
    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>
  5. 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.
See Also

Concepts

Reference