1

I am trying to use the maxLength attribute in JSX, but the examples I've found are not working.

<div>
    <input type="Number" maxLength={5}/>
</div>

This is what I have currently, and I've tried:

maxLength="5"

maxLength={"5"}

Thank you.

ys27
  • 89
  • 1
  • 9
  • Assuming you're using integers, try setting `max="99999"`. [MDN on ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input). –  Apr 28 '16 at 16:11

2 Answers2

3

Problem is not with react or JSX at all. The problem is that input type "number" does not support maxlength property. It support property "max". For example:

<input type="Number" max="99"/>

Will allow numbers up to 99.

Also JSX does support maxLength property and you can write it like:

maxLength="5"
maxLength={"5"}
maxLength={5}

It will be the same thing

Davinel
  • 940
  • 4
  • 10
  • 20
  • I see, I chose to use text because I wanted to restrict typing after 9chars. Thank you. – ys27 Apr 28 '16 at 17:30
1

Do you need to use the type of "Number" ? maxLength will work with "text", however you would want to use max with number to define the max limit of the range of acceptable numbers. however, it won't prevent a user from entering more numbers then you specified, as answered here,

How can I limit possible inputs in a HTML5 "number" element?

Community
  • 1
  • 1
Jeff Gnatek
  • 11
  • 1
  • 1