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