Search results

Set cursor position while focus on the input textbox in Angular MaskedTextBox component

16 Sep 2021 / 2 minutes to read

By default, on focusing the MaskedTextBox the entire mask gets selected. You can customize by using any one of the following methods:

  • Setting cursor position at the start of the MaskedTextBox.
  • Setting cursor position at the end of the MaskedTextBox.
  • Setting cursor at the specified position in the MaskedTextBox.

The selectionStart and selectionEnd set to 0 instead of the input element value’s length, when we focus on a MaskedTextBox control filled with all mask characters. This is the default behavior of the HTML 5 input element.

Following is an example that demonstrates the above cases to set cursor position in the MaskedTextBox using focus event.

Copied to clipboard
import { Component } from '@angular/core';

selector: 'app-root',
// sets mask format to the MaskedTextBox
template: `
        <div class="col-sm-6">
            <br/><ejs-maskedtextbox #mask="" id="mask1" mask='00000-00000' value='93828-32132' name="mask_value1" placeholder= 'Default cursor position' floatLabelType= 'Always'></ejs-maskedtextbox><br/>
            <ejs-maskedtextbox #mask="" id="mask2" mask='00000-00000' value='83929-4342' name="mask_value2" placeholder= 'Cursor positioned at start' floatLabelType= 'Always' (focus)= "onStartfocus($event)"></ejs-maskedtextbox><br/>
            <ejs-maskedtextbox #mask="" id="mask3" mask='00000-00000' value='83929-3213' name="mask_value3" placeholder= 'Cursor positioned at end' floatLabelType= 'Always' (focus)= "onEndfocus($event)"></ejs-maskedtextbox><br/>
            <ejs-maskedtextbox #mask="" id="mask4" mask='+1 000-000-0000' value='234-432-432' name="mask_value4" placeholder= 'Cursor at specified position' floatLabelType= 'Always' (focus)= "onSpecificfocus($event)"></ejs-maskedtextbox>

export class AppComponent {
public onStartfocus(args): void {
    //sets cursor position at start of MaskedTextBox
    args.selectionEnd= args.selectionStart = 0;
    public onEndfocus(args): void {
    //sets cursor position at end of MaskedTextBox
    args.selectionStart=args.selectionEnd = args.maskedValue.length;
    public onSpecificfocus(args): void {
    //sets cursor at specified position
    args.selectionStart = 3;
    args.selectionEnd = 3;
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

 * Module
    imports: [
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <title>EJ2 Angular MaskedTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular MaskedTextBox Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <!-- Here we have used CDN links for our preview purpose  -->
    <link href="//" rel="stylesheet" />
   <link href="//" rel="stylesheet" />

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='ang_container'>
        <div class='wrap'>
                <div id='loader'>LOADING....</div>

Copied to clipboard
#container {
    visibility: hidden;

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;

.wrap {
  margin: 20px auto;
  width: 240px;

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

.e-widget {
    padding-bottom: 12px;