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.
To limit the number of characters entered in a textarea, use the maxlength attribute. The value if the attribute is in number. Specifies that on page load the text area should automatically get focus. Specifies the width of the textarea based on the number of visible character widths.
<textarea> is a replaced element — it has intrinsic dimensions, like a raster image. By default, its display value is inline-block .
By default, a textarea is editable. So you must have made something that make it uneditable.
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">
I stumbled also over this issue, in my case only chromium browser is affected. -> https://code.google.com/p/chromium/issues/detail?id=237433
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With