Getting started with JavaScript MaskedTextBox control

08 May 2023 / 3 minutes to read

The following section explains the required steps to build the MaskedTextBox component with its basic usage in step-by-step procedure.

Dependencies

The following list of dependencies are required to use the MaskedTextBox component in your application.

|-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-base

Set up your development environment

To get started with MaskedTextBox component, you can clone the Essential JS 2 QuickStart project, and install the packages by using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

The project is preconfigured with the common settings (src/styles/styles.css, system.config.js ) to start with all the Essential JS 2 components.

Add MaskedTextBox to the project

Add the HTML input element that needs to be rendered as MaskedTextBox in the index.html file.

[src/index.html]

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MaskedTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2 MaskedTextBox" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="/styles/styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="system.config.js" type="text/javascript"></script>
</head>

<body>
    <div style="margin: 50px;">
        <!--input element which needs to be rendered/converted as MaskedTextBox-->
        <input id="mask" type="text" />
    </div>

</body>

</html>

Import the MaskedTextBox component into your app.ts and append it to the element #mask as shown in the following.

[src/app/app.ts]

import { MaskedTextBox } from '@syncfusion/ej2-inputs';

// initializes the MaskedTextBox component
let mask: MaskedTextBox = new MaskedTextBox();

mask.appendTo('#mask');

Set the mask

You can set the mask to the MaskedTextBox to validate the user input by using the mask property. To know more about the usage of mask and configuration, refer to this link.

The following example demonstrates the usage of mask element 0 that allows any single digit from 0 to 9.

import { MaskedTextBox } from '@syncfusion/ej2-inputs';

// initializes the MaskedTextBox component
let mask: MaskedTextBox = new MaskedTextBox({
        // sets mask format to the MaskedTextBox
        mask: '000-000-0000'
});

mask.appendTo('#mask');

Run the application

Use the npm run start command to run the application in the browser.

npm run start

The following example shows the MaskedTextBox with the mask element 0.

Source

Preview

app.ts

index.html

styles.css

import { MaskedTextBox } from '@syncfusion/ej2-inputs';

// initializes the MaskedTextBox component
let mask: MaskedTextBox = new MaskedTextBox({
        // sets mask format to the MaskedTextBox
        mask: '000-000-0000',
        placeholder: 'MaskedTextBox',
        floatLabelType: 'Always'
});

mask.appendTo('#mask');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 MaskedTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript MaskedTextBox Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <input id="mask" type="text" />
        </div>
    </div>
</body>
</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 240px;
}

.label {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}