当文本里面有很多文字时,输入textarea超级慢

时间:2013-05-24 13:31:12

标签: html css css3 dom textarea

我在Chrome中试过这个。在内部有大量文本的textarea,最后编辑部分变得非常慢。光标和键盘输入响应开始爬行。

但是,如果我这样做,以便CSS链接从<head>移动到</body>之后,它就不再变慢。有什么想法存在这种现象吗?

使用的代码:

<!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>

这个html实际上是由后端脚本生成的,它将用几千行文本填充textarea的内容。当用户向下滚动到内容的末尾时,这就是缓慢开始的地方。如果头部区域的css被移除,它将很快。

5 个答案:

答案 0 :(得分:17)

spellcheck设为false

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

这可能会有所帮助。

根据Augustin的建议,你也可以尝试添加这些人:

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

答案 1 :(得分:3)

我也遇到了这个问题,在我的情况下只有铬浏览器受到影响。 - &GT; https://code.google.com/p/chromium/issues/detail?id=237433

答案 2 :(得分:3)

我遇到了同样的问题,但我用下一个属性ng-model-options="{ updateOn: 'blur' }"

解决了这个问题

尝试

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

答案 3 :(得分:2)

没有看到现场的例子,很难说。但有几个可能的原因:

  • 您在textarea(font-face?SIFr?)中使用自定义字体,由于需要额外的开销,这会缩短浏览器的速度。 特别是,如果您使用的是SIFr!
  • 验证问题:您的HTML / CSS有效吗?尝试通过W3验证运行它:(HTMLCSS)。
  • 您是否在页面上使用JavaScript?可能是使用textarea触发的某些验证或其他过程?

我的直觉是,它是上面最后两点之一,试图帮助排除故障,尝试:

  • 通过验证程序运行标记并解决引发的任何问题。它还能做到吗?
  • 禁用JavaScript并加载页面。它还能做到吗?

我希望你能够很快缩小原因。

PS:不要把CSS放在任何地方但是在头脑中 - 这会引起各种其他问题!

答案 4 :(得分:0)

如果问题只发生在Chrome中,则可能是拼写检查程序。

根据@PapaKai提供的链接,禁用拼写检查可能有所帮助。 (最近建议)

您可以使用&lt; textarea spellcheck =&#34; false&#34;&gt;禁用textarea上的拼写检查功能。正如this回答

中所述