Search results

Set cursor position while focus on the input textbox in React MaskedTextBox component

14 Apr 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.

Following is an example that demonstrates the above cases to set cursor position in the MaskedTextBox using focus event.

Copied to clipboard
import { MaskedTextBoxComponent, MaskFocusEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
   constructor(props: any) {
this.onfocus = this.onfocus.bind(this);
this.onfocus1 = this.onfocus1.bind(this);
this.onfocus2 = this.onfocus2.bind(this);
  public onfocus(args: MaskFocusEventArgs) {
  // sets cursor position at start of MaskedTextBox
  args.selectionEnd= args.selectionStart;
  public onfocus1(args: MaskFocusEventArgs) {
  // sets cursor position at end of MaskedTextBox
  public onfocus2(args: MaskFocusEventArgs) {
  // sets cursor at specified position
  args.selectionStart = 3;
  args.selectionEnd = 3;
  public render() {
  return (
      <br/><MaskedTextBoxComponent name="mask_value1" placeholder="Default cursor position" mask= "00000-00000" value="93828-32132" floatLabelType='Always'/>
      <MaskedTextBoxComponent name="mask_value2" placeholder="Cursor positioned at start" mask= "00000-00000" value="83929-43427" floatLabelType='Always' focus={this.onfocus}/>
      <MaskedTextBoxComponent name="mask_value3" placeholder="Cursor positioned at end" mask= "00000-00000" value="83929-32131" floatLabelType='Always' focus={this.onfocus1}/>
      <MaskedTextBoxComponent name="mask_value4" placeholder="Cursor at specified position" mask= "+1 000-000-0000" value="234-432-4324" floatLabelType='Always' focus={this.onfocus2}/>
ReactDOM.render(<App />, document.getElementById('masktextbox'));