Set cursor position while focus on the input textbox in EJ2 TypeScript Maskedtextbox control

29 Aug 20235 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.

index.ts
index.html
styles.css
import { MaskedTextBox } from '@syncfusion/ej2-inputs';

// initializes the First MaskedTextBox component
let mask: MaskedTextBox = new MaskedTextBox({
  // Default MaskedTextBox
  mask: '00000-00000',
  value: '93828-3213',
  placeholder: 'Default cursor position',
  floatLabelType: 'Always'
});

mask.appendTo('#mask1');

// initializes the Second MaskedTextBox component
let mask1: MaskedTextBox = new MaskedTextBox({
  // sets mask format to the MaskedTextBox
  mask: '00000-00000',
  value: '83929-4343',
  placeholder: 'Cursor positioned at start',
  floatLabelType: 'Always',
  focus: function(args) {
    //sets cursor position at start of MaskedTextBox
    args.selectionEnd = args.selectionStart = 0;
  }
});

mask1.appendTo('#mask2');

// initializes the Third MaskedTextBox component
let mask2: MaskedTextBox = new MaskedTextBox({
  // sets mask format to the MaskedTextBox
  mask: '00000-00000',
  value: '83929-3213',
  placeholder: 'Cursor positioned at end',
  floatLabelType: 'Always',
  focus: function(args) {
    //sets cursor position at end of MaskedTextBox
    args.selectionStart = args.selectionEnd = args.maskedValue.length;
  }
});

mask2.appendTo('#mask3');

// initializes the Fourth MaskedTextBox component
let mask3: MaskedTextBox = new MaskedTextBox({
  // sets mask format to the MaskedTextBox
  mask: '+1 000-000-0000',
  value: '234-432-432',
  placeholder: 'Cursor at specified position',
  floatLabelType: 'Always',
  focus: function(args) {
    //sets cursor at specified position
    args.selectionStart = 3;
    args.selectionEnd = 3;
  }
});

mask3.appendTo('#mask4');
<!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 With Different Cursor Positions" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
                <div class="form-group">
                    <br/><input id="mask1" type="text" name="mask_value1" class="form-control" />
                    <input id="mask2" type="text" name="mask_value2" class="form-control" />
                    <input id="mask3" type="text" name="mask_value3" class="form-control" />
                    <input id="mask4" type="text" name="mask_value4" class="form-control" />
                </div>
        </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;
}

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