NumberKeyboard <Experimental></Experimental>
Numeric keypad panel.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Numeric keypad panel.
When to Use
Applicable when entering numeric content.
Can be used with password input box component or custom input box component
If possible, we recommend using the native keyboard provided by the system or client. The virtual numeric keypad is just a supplement for some special scenarios.
Demos
tips: It is recommended to open the demo on the mobile side for better preview effect, because the touch event used by the component cannot be seen on the web side.
NumberKeyboard
Props
| Name | Description | Type | Default |
|---|---|---|---|
| afterClose | Callback when the keyboard is completely put away | () => void | - |
| afterShow | Callback when the keyboard is completely bounced | () => void | - |
| closeOnConfirm | Whether to automatically close when the ok button is clicked | boolean | true |
| confirmText | The text of the confirm button, if null is set, it would be shown | string | null | null |
| customKey | Customized button | string | { key: string; title: string } | (string | { key: string; title: string })[] | - |
| destroyOnClose | Destroy dom when not visible | boolean | false |
| forceRender | Render content forcely | boolean | false |
| getContainer | To get the specified mounted HTML node, the default is body, if null returned, it would be rendered to the current node | HTMLElement | () => HTMLElement | null | () => document.body |
| onClose | Triggered when it is clicked | () => void | - |
| onConfirm | Triggered when the ok button is clicked | () => void | - |
| onDelete | Callback when the content is deleted | () => void | - |
| onInput | Callback when the input content is changed | (v: string) => void | - |
| randomOrder | Whether the keyboard is out of order | boolean | false |
| safeArea | Whether to enable safe area padding | boolean | true |
| showCloseButton | Whether to show the collapsed keyboard arrow | boolean | true |
| title | The title of the keyboard | string | - |
| visible | Whether to show or hide | boolean | - |
In addition, the following attributes of Popup are supported: stopPropagation
FAQ
Does the NumberKeyboard support automatic reading of verification codes from SMS?
No.