Search results

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

02 Aug 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.

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
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');
Copied to clipboard
<!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://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>
Copied to clipboard
#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;
}