Search results

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

18 May 2022 / 1 minute to read

By default, on focusing the MaskedTextBox, alphanumeric keypad will be displayed on mobile devices. Sometimes only numeric keypad for number values is needed, and this can be achieved by setting “type” property to tel. Refer to the following example to enable numeric keypad in MaskedTextBox.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React MaskedTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React MaskedTextBox Component" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-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 class='wrap'>
        <form id="form-element" class="form-horizontal">
            <div class="form-group">
                <div id='masktextbox'>
                    <div id='loader'>Loading....</div>
                </div>
                <br>
                <div id="error" />
            </div>
        </form>
    </div>
</body>

</html>
Copied to clipboard
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'));