How to display numeric keypad on mobile in React MaskedTextBox

9 Aug 20261 minute to read

By default, when the MaskedTextBox is focused, an alphanumeric keypad is displayed on mobile devices. To display only a numeric keypad, set the type property to tel. The following example shows how to enable the numeric keypad in the MaskedTextBox.

index.jsx

import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    render() {
        return (<div>
          <br /><MaskedTextBoxComponent name="mask_value" mask='999-99999' value="342-45432" type="tel"/>
        </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('masktextbox'));

index.tsx

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

export default class App extends React.Component<{}, {}> {
  public render() {
      return (
        <div>
          <br/><MaskedTextBoxComponent name="mask_value" mask='999-99999' value= "342-45432" type="tel"/>
        </div>
      );
  }
};
ReactDOM.render(<App />, document.getElementById('masktextbox'));