diff --git a/README.md b/README.md
index 231a1b61..8d664dfd 100644
--- a/README.md
+++ b/README.md
@@ -232,13 +232,20 @@ online example: https://input-number.vercel.app/
|
Specifies the inputmode of input |
+
+ maxLength |
+ number |
+ |
+ input max length |
+
## 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`
+
+- 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`
## Test Case
diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
index b8524c82..7ee6ad97 100644
--- a/src/InputNumber.tsx
+++ b/src/InputNumber.tsx
@@ -67,6 +67,7 @@ export interface InputNumberProps
// useTouch: boolean;
// size?: ISize;
+ maxLength?: number;
}
const InputNumber = React.forwardRef(
@@ -92,6 +93,7 @@ const InputNumber = React.forwardRef(
formatter,
precision,
decimalSeparator,
+ maxLength,
onChange,
onInput,
@@ -336,8 +338,11 @@ const InputNumber = React.forwardRef(
};
// >>> Input
- const onInternalInput: React.ChangeEventHandler = (e) => {
+ const onInternalInput: React.ChangeEventHandler = e => {
let inputStr = e.target.value;
+ if (maxLength > 0) {
+ inputStr = inputStr.slice(0, maxLength);
+ }
// optimize for chinese input experience
// https://github.com/ant-design/ant-design/issues/8196
@@ -404,7 +409,7 @@ const InputNumber = React.forwardRef(
}
};
- const onKeyDown: React.KeyboardEventHandler = (event) => {
+ const onKeyDown: React.KeyboardEventHandler = event => {
const { which } = event;
userTypingRef.current = true;
diff --git a/tests/input.test.tsx b/tests/input.test.tsx
index c2a395b8..d445f939 100644
--- a/tests/input.test.tsx
+++ b/tests/input.test.tsx
@@ -80,6 +80,25 @@ describe('InputNumber.Input', () => {
expect(wrapper.getInputValue()).toEqual('');
});
+ it('max length 3', () => {
+ const wrapper = prepareWrapper('333333', { maxLength: 3 }, true);
+ expect(wrapper.getInputValue()).toEqual('333');
+ });
+
+ it('max length 0', () => {
+ const wrapper = prepareWrapper('333333', { maxLength: 0 }, true);
+ expect(wrapper.getInputValue()).toEqual('333333');
+ });
+
+ it('control max length', () => {
+ const wrapper = mount();
+ wrapper.focusInput();
+ expect(wrapper.getInputValue()).toEqual('1234');
+
+ wrapper.changeValue('1234');
+ expect(wrapper.getInputValue()).toEqual('123');
+ });
+
it('blur on default input', () => {
const onChange = jest.fn();
const wrapper = mount();