Display numeric keypad on mobile devices in Angular MaskedTextBox component

26 Feb 20261 minute to read

By default, the MaskedTextBox displays an alphanumeric keypad when focused on mobile devices. To display only a numeric keypad, set the type property to tel. The following example demonstrates how to enable the numeric keypad in the MaskedTextBox.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';

@Component({
imports: [
         MaskedTextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    // sets mask format to the MaskedTextBox
    template: `
            <div class="col-sm-6">
                <br/><ejs-maskedtextbox #mask="" mask='999-99999' value= "342-45432" name="mask_value" type="tel"></ejs-maskedtextbox>
            </div>
    `
})

export class AppComponent {
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));