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.
// initializes the First MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
// Default MaskedTextBox
mask: '00000-00000',
value: '93828-3213',
placeholder: 'Default cursor position',
floatLabelType: 'Always'
});
mask.appendTo('#mask1');
// initializes the Second MaskedTextBox component
var mask1 = new ej.inputs.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
var mask2 = new ej.inputs.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
var mask3 = new ej.inputs.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/20.1.58/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-inputs/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.1.58/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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;
}