HelpBot Assistant

How can I help you?

Display numeric keypad when focus on mobile devices in React Maskedtextbox component

21 Feb 20262 minutes 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.

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'));
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'));