每次键入一个字符时，TEXTAREAs 会自行滚动（在 IE8 上）
Posted
技术标签:
【中文标题】每次键入一个字符时，TEXTAREAs 会自行滚动（在 IE8 上）【英文标题】：TEXTAREAs scroll by themselves (on IE8) every time you type one character 【发布时间】：2011-02-25 08:59:00 【问题描述】：IE8 有一个已知错误（根据connect.microsoft.com），在 TEXTAREA 元素中键入或粘贴文本会导致文本区域自行滚动。这非常烦人，并出现在包括***在内的许多社区网站中。重现是这样的：
-
用 IE8 打开下面的 html（或使用***上的任何长页面，在他们修复之前会出现同样的问题）
全屏浏览器大小
将几页文本粘贴到 TEXTAREA 中
将滚动条移动到中间位置
现在在文本区域中输入一个字符
预期：没有任何反应 实际：滚动是自己发生的，插入点在文本区域的底部附近结束！
下面是重现的 HTML（也可以在网上看到这个：http://en.wikipedia.org/w/index.php?title=Text_box&action=edit）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><body>
<div style="width: 80%">
<textarea rows="20" cols="80" style="width:100%;" ></textarea>
</div>
</body></html>
我知道我可以通过强制网站进入 IE7 兼容模式来避免这种情况，但是解决此错误同时尽可能减少副作用的最佳其他方法是什么？
【问题讨论】：
【参考方案1】：我最终浪费了很多时间试图自己找出答案，所以我想我会省去别人回答的麻烦。诀窍是为 TEXTAREA 元素上的 COLS 属性使用一个非常大的值。像这样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<div style="width: 80%">
<textarea rows="20" cols="5000" style="width:100%;" ></textarea>
</div>
</body>
</html>
我还看到workaround online 使用非百分比width，然后使用百分比max-width 和min-width，但这比上述其他解决方法的影响要小得多（由Ross 提供）似乎适用于所有浏览器，包括 IE6。
更多细节：经过一个小时的调查，问题似乎是由 IE8 处理 textarea 元素上的“COLS”属性和“width”样式之间的冲突引起的。如果宽度 CSS 比默认宽度（字体宽度 x cols）宽，IE8 在添加文本和滚动文本区域时会感到困惑。相反，如果 CSS 的宽度小于从 cols 属性派生的默认宽度，则一切正常。
cols 和 width 之间微妙的依赖关系可能是问题难以重现的原因，因为根据 cols 与 width 的比率，相同的确切页面会中断或不中断。问题中的 HTML 实际上在大浏览器窗口上重现了该错误，而不是在小浏览器窗口上重现！
【讨论】：
谢谢贾斯汀。我只是被这个虫子咬了。 投了反对票，因为问题的答案是第二部分，但是上面的内容可能对某些人有用。【参考方案2】：我认为描述此错误的最佳方式是，如果您使用 CSS 为 textarea 设置宽度，并且此宽度与 COLS 字段呈现的宽度相差太大，IE8 会显示奇怪的问题，即跳过滚动条.
所以，如果你有 cols="10" 和 textarea width: 600px; ，问题就会出现，因为 IE8 将使用 COLS 属性计算的宽度进行滚动，而不是覆盖尺寸的 CSS。
【讨论】：
【参考方案3】：我只是想说声谢谢，因为我的声誉还不到 50，但我不得不说一些我在这个问题上花了 4 天的时间。请注意，这也适用于启用多行的 asp.net 文本框。我不是在开玩笑，我花了 4 天 8 小时的时间在这上面，现在你的帖子真的帮助解决了这个 MEGA BUG...
<asp:TextBox runat="server" TextMode="MultiLine" ID="tbxMyTextBox" ClientIDMode="static" Width="100%" Rows="4" Height="75px" MaxLength="5000" Columns="5000" TabIndex="3"></asp:TextBox>
非常感谢。
【讨论】：
以上是关于每次键入一个字符时，TEXTAREAs 会自行滚动（在 IE8 上）的主要内容，如果未能解决你的问题，请参考以下文章
当用户键入一些文本时，IE textarea 的宽度会发生变化
将 textareas 字符串值转换为由换行符分隔的 JavaScript 数组