Search results

Getting started with JavaScript MaskedTextBox control

15 Oct 2021 / 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.

Copied to clipboard
|-- @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.

Copied to clipboard
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]

Copied to clipboard
<!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]

Copied to clipboard
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.

Copied to clipboard
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.

Copied to clipboard
npm run start

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

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
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');
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
Copied to clipboard
#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;
}

See Also