typing in textarea super slow when lots of text inside

Question

I tried this in Chrome. Having a textarea with a lot of text inside, editing the parts at the end become super slow. The cursor and the keyboard input response comes to a crawl.

But if I make it so that the CSS links are moved from the <head> to after </body> it not longer becomes slow. Any ideas why this phenomenon exists?

Code used:

<!DOCTYPE html>
<html>
    <head>
        <style>textarea {width: 400px; height: 400px;}</style>
        <link href="1.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <textarea name="content"></textarea>
    </body>
</html>

This html is actually generated by backend scripts, which will fill the content of the textarea with thousands of lines of text. When the user scrolls down to the end of the content, that's where the slowness begins. If the css at the head area is removed, it will be fast.

How much text is "lots of text"? Also, CSS should always be included in your document's `head` tag for rendering purposes. — James Donnelly, May 24 '13 at 13:49
@DiederikEEn looked more like line numbers. At around 5000 lines in the textarea, it started becoming slow. Each line is about a few words long. — lamp_scaler, May 24 '13 at 15:41

João Paulo · Answer 1 · 2018-11-30T16:26:17.827

28

Set spellcheck to false:

<textarea spellcheck="false"></textarea>

It might help.

By Augustin suggestion, you can also try adding these guys:

<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">

edited Nov 30 '18 at 16:26

answered Apr 05 '16 at 20:00

João Paulo

6,300
4
51
80

1

thanks just to be sure I added autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" and that solved my performance issues. Thanks! – Agustin Cautin Aug 31 '16 at 13:11

score 4 · Answer 2 · answered Apr 16 '14 at 12:00

4

I stumbled also over this issue, in my case only chromium browser is affected. -> https://code.google.com/p/chromium/issues/detail?id=237433

answered Apr 16 '14 at 12:00

PapaKai

434
1
6
7

From the Chromium issue 237433: "_... it helped a lot (think 100x) to turn off spelling correction (via right-click on the field)._", but in recent versions of Chrome there is no more option to turn off spelling in right-click context menu of textarea. – osgx Jan 02 '16 at 22:56

score 3 · Answer 3 · answered Dec 07 '16 at 15:25

3

I had the same problem, but I solved it with the next attribute ng-model-options="{ updateOn: 'blur' }"

try with

<textarea ng-model-options="{ updateOn: 'blur' }"></textarea>

answered Dec 07 '16 at 15:25

varolagos

31
2

score 2 · Answer 4 · answered May 24 '13 at 13:49

Without seeing a live example, it's difficult to say. But a couple of possible reasons:

You're using custom fonts in the textarea (font-face? SIFr?) which is slowing the browser down due to the additional overheads required. Particularly if you're using something like SIFr!
A validation issue: is your HTML/CSS valid? Try running it through the W3 validations: (HTML, CSS).
Are you using JavaScript on the page? Perhaps some validation or other process that might be triggered by using the textarea?

My gut expectation would be that it's one of the last two points above, to try and help trouble-shoot, try:

Running your markup through the validators and resolving any issues raised. Does it still do it?
Disable JavaScript and load the page. Does it still do it?

I expect you will be able to narrow down the reason very quickly then.

PS: don't put the CSS anywhere but in the head - that will cause you all sorts of other problems!

score 1 · Answer 5 · edited May 23 '17 at 12:24

1

If the problem only occurs in Chrome, it could be the spellchecker.

According to the link provided by @PapaKai, disabling the spell checker might help. (recently suggested)

You can disable spellchecking on just the textarea with <textarea spellcheck="false"> as explained in this answer

edited May 23 '17 at 12:24

Community

1
1

answered Nov 20 '15 at 10:48

Willem Burgers

53
9

typing in textarea super slow when lots of text inside

5 Answers5