Search results

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

08 Apr 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.

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-43427' 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-32131' 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-4324' 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;
    public onEndfocus(args): void {
    //sets cursor position at end of MaskedTextBox
    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;