By default, on focusing the MaskedTextBox the entire mask gets selected. You can customize by using any one of the following methods:
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.
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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/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'>
<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;
}