JavaScript (ES5)
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Set cursor position while focus on the input textbox in JavaScript (ES5) MaskedTextBox control

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.

Source
Preview
index.js
index.html
styles.css
// initializes the First MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // Default MaskedTextBox
    mask: '00000-00000',
    value: '93828-32132',
    placeholder: 'Default cursor position',
    floatLabelType: 'Always',
});

mask.appendTo('#mask1');

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

mask.appendTo('#mask2');

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

mask.appendTo('#mask3');

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

mask.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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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;
}
Previous
Next