8.1 KiB
8.1 KiB
rc-input-number
Input number control.
Screenshots
Install
Usage
import InputNumber from 'rc-input-number';
export default () => <InputNumber defaultValue={10} />;
Development
npm install
npm start
Example
http://127.0.0.1:8000/examples/
online example: https://input-number.vercel.app/
API
props
name | type | default | description |
---|---|---|---|
prefixCls | string | rc-input-number | Specifies the class prefix |
min | Number | Specifies the minimum value | |
onClick | |||
placeholder | string | ||
max | Number | Specifies the maximum value | |
step | Number or String | 1 | Specifies the legal number intervals |
precision | Number | Specifies the precision length of value | |
disabled | Boolean | false | Specifies that an InputNumber should be disabled |
required | Boolean | false | Specifies that an InputNumber is required |
autoFocus | Boolean | false | Specifies that an InputNumber should automatically get focus when the page loads |
readOnly | Boolean | false | Specifies that an InputNumber is read only |
controls | Boolean | true | Whether to enable the control buttons |
name | String | Specifies the name of an InputNumber | |
id | String | Specifies the id of an InputNumber | |
value | Number | Specifies the value of an InputNumber | |
defaultValue | Number | Specifies the defaultValue of an InputNumber | |
onChange | Function | Called when value of an InputNumber changed | |
onBlur | Function | Called when user leaves an input field | |
onPressEnter | Function | The callback function that is triggered when Enter key is pressed. | |
onFocus | Function | Called when an element gets focus | |
style | Object | root style. such as {width:100} | |
upHandler | React.Node | custom the up step element | |
downHandler | React.Node | custom the down step element | |
formatter | (value: number|string): displayValue: string | Specifies the format of the value presented | |
parser | (displayValue: string) => value: number | `input => input.replace(/[^\w\.-]*/g, '')` | Specifies the value extracted from formatter |
pattern | string | Specifies a regex pattern to be added to the input number element - useful for forcing iOS to open the number pad instead of the normal keyboard (supply a regex of "\d*" to do this) or form validation | |
decimalSeparator | string | Specifies the decimal separator | |
inputMode | string | Specifies the inputmode of input | |
wheel | Boolean | true | Allows changing value with mouse wheel |
Keyboard Navigation
- When you hit the ⬆ or ⬇ key, the input value will be increased or decreased by
step
- With the Shift key (Shift+⬆, Shift+⬇), the input value will be changed by
10 * step
- With the Ctrl or ⌘ key (Ctrl+⬆ or ⌘+⬆ or Ctrl+⬇ or ⌘+⬇ ), the input value will be changed by
0.1 * step
Mouse Wheel
- When you scroll up or down, the input value will be increased or decreased by
step
- Scrolling with the Shift key, the input value will be changed by
10 * step
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rc-input-number is released under the MIT license.