I'm using a <textarea> field to get inputs from clients.
By default the maxlength for <textarea> is 524288.
Source: Maxlength for Textarea
I want the <textarea> to be limitless because clients want to use it to process large bodies of text.
How can this be achieved?
What I tried:
I have used maxLength={Number.MAX_SAFE_INTEGER}. This will set the maxlength to maximum safe integer in JavaScript (9007199254740991).
I'm looking for other better approaches.
The standard does not specify the maximum limit for maxlength by default. However, there are technical limitations of various browsers related to performance. For example, the same Chrome has a limit of maxlength = 2147483647, as in the example below:
const element1 = document.querySelector('#example-1');
const element2 = document.querySelector('#example-2');
console.log('maxlength element #1 (=2147483647):', element1.maxLength);
console.log('maxlength element #2 (=2147483648):', element2.maxLength);<textarea id="example-1" maxlength="2147483647"></textarea>
<textarea id="example-2" maxlength="2147483648"></textarea>If you need to work with such a large text, you should take a closer look at using contenteditable="true", but at the same time, try to avoid using performance-heavy CSS styles. Example below:
div {
width: 400px;
height: 150px;
border: 1px solid black;
resize: both;
overflow: auto;
}<div contenteditable="true">...there should be a lot of text here...</div>But purely from the performance side, perhaps you should look at the possibility of loading such a large text as a stream (including a file stream), with partial display of it on the screen, for better performance.