How to remove default maximum word limit (maxlength) from <textarea>

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.

Solution 1:

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.