How do you set such attribute? For example the CCV field of credit card should have a max length of 3. Expiry date should have a max length of 2 for month and 4 for years.
Asked
Active
Viewed 1.1e+01k times
72
-
1I think you need to do it manually by doing something like `
` – Samuli Hakoniemi Apr 10 '15 at 07:29 -
Same question: http://stackoverflow.com/questions/31281216/is-there-a-way-to-limit-the-length-of-a-textinput-in-react-native?rq=1 – 吳強福 Apr 15 '17 at 06:45
-
Just a note, a CVV for a credit card could have 4 digits, in some cards. – Marlon Jun 08 '20 at 23:21
3 Answers
140
The maxLength prop is now part of React Native:
<TextInput value={this.state.text} maxLength={4} />
Dan Leveille
- 3,001
- 2
- 24
- 28
-
3I have add maxLength={4} as the props of TextInput, but the simulator allows the input with length more than 4. Is this the limitation of simulator or I miss something? – 吳強福 Apr 15 '17 at 06:41
-
2@吳強福 That's strange. It works fine for me. And you're on the latest version? (Though this was added well over a year ago...) – Dan Leveille Apr 17 '17 at 17:56
-
Is there any solution for 'Text' field? because 'maxLength' is not working for 'Text' field. – Luvnish Monga Jul 11 '18 at 07:16
-
2maxLength' did not worked for 'TextInput' I had to add multiline={false} as well. Without adding this maxLength={4} did not worked – surhidamatya Aug 17 '18 at 06:40
9
<TextInput value={this.state.text} maxLength={1000} />
ot is working for me to set the input text length.
M Mahmud Hasan
- 1,303
- 1
- 13
- 20
-
What's the difference between your answer and the answer with the highest score? – Sid110307 May 04 '22 at 10:49
3
Please make sure you are using maxLength with camel case and not maxlengh
it seems obvious but it wasn't to me when i was breaking my head trying to figure it out hope this helps
prog
- 173
- 1
- 3
- 12