寻找终极调整文本区域答案

【问题标题】：Searching for the Ultimate Resizing Textarea寻找终极调整文本区域
【发布时间】：2009-10-19 04:19:37
【问题描述】：

我想为用户提供一个调整大小的 textarea 控件。我已经尝试过并查看了许多其他实现，但我似乎找不到满足我所有要求的实现。具体来说，我想要一个控件：

当页面以标准兼容模式（即非 quirks 模式）呈现时，可在 Windows 上的 IE6、IE7、IE8 以及 Windows 和 OS X 上的 Firefox 3 和 3.5 中运行。
不会弄乱撤消缓冲区/撤消堆栈。对于 IE，这是一个特别讨厌的问题——添加节点、删除节点和一些其他 DOM 操作将重置输入缓冲区，这意味着如果实现依赖这些技术，撤消将不会像在标准文本区域控件中那样表现。除了this note 之外，我无法找到有关此错误的更多信息。像 jQuery Auto Growing Plugin 这样的实现会遇到这个问题 - 尝试在 IE 中撤消更改并将其工作方式与标准文本区域进行比较。我添加了一个 example page 来向 JSBin 演示这个问题。
具有控件无法增长的最大高度。
在删除内容时适当收缩。
在按键时不会闪烁或出现异常动作。例如当控件增长到超出其初始大小时，jQuery Auto Growing Textarea 控件的行为会很奇怪，至少在 IE7 中。
不要求控件使用固定宽度/等宽字体。

我见过的最接近这种工作方式的是 Facebook 的状态更新字段，它被实现为内容可编辑的 div 元素，但我对使用这样的元素有一些保留，因为使用 div 意味着：

我在上面列出的内容代表了“最终调整文本区域的大小”——解决了我认为现有方法存在的问题。这样的控制存在吗？能不能写出这样的控件？

【问题讨论】：

“它在包含数百个标准输入元素的表单中效果如何？”很多这样的超级文本区域会在同一个页面上使用吗？
可能，是的。 Facebook（甚至是 Google Docs）的问题在于，它们只需要处理页面上的单个 contentEditable 元素，这显然比处理 20+ 元素要简单得多。

【解决方案1】：

查看DOJO tools text area control

查看更多关于此demo page（表格末尾的文本区域）

这非常符合您的要求。

【讨论】：

【解决方案2】：

您可能需要自行推出以满足这些要求。

这些可能是一个开始。

http://tuckey.org/textareasizer/（尽管尽量避免使用 eval()）

这实际上看起来是一个不错的 jQuery 插件。 ~~我可能有办法开发这样的东西。如果我完成了，我会在这里发布。~~

我花了几个小时开发一些东西，但后来我发现这个似乎真的很好。

【讨论】：

ViralPatel 的解决方案详细说明了如何创建与我感兴趣的控件略有不同的控件。
Stephen Chapman 的解决方案在内容被删除时不会缩小。
Text Area Resizer 在使用 Firefox 时缩小时出现问题。
顺便说一句，在 Text Area Resizer 中使用 eval 很奇怪，该函数的最后 3 行可以重写为：return Math.max(hard_lines, soft_lines);
@wrumsby 是的，当我检查源代码时，我确实发现这很奇怪。也许作者不熟悉 Math 对象。然而，当转向eval() 时，通常会有更好的方法（我认为eval() 唯一有用的是解析JSON）。

【解决方案3】：

您想自动调整显示大小吗？但保持内容不变？

这就是脚本所能做的，调整显示，让你看到更多你自己的文字......

【讨论】：

【解决方案4】：

This A List Apart post 包含一个看起来非常接近您的标准的实现，并且包含对正在发生的事情的一个很好的解释。

【讨论】：

【解决方案5】：

这些有用吗？

【讨论】：

SitePoint 文章（三篇中的一篇）对技术进行了一些有用的观察，但它破坏了 IE 中的撤消堆栈，因为该解决方案操纵了 DOM。
ViralPatel 的解决方案详细说明了如何创建与我感兴趣的控件略有不同的控件。
智能区域似乎有缩小问题，尤其是在 Internet Explorer 中。
Resizable Body 基于弹性 jQuery 插件 - plugins.jquery.com/project/elastic - IE 中的撤消堆栈同样存在问题。

【解决方案6】：

我一直在使用nicEdit。它似乎拥有您所需要的一切，而且该脚本只有 1700 行，带有 MIT 许可证，因此您可以进行所需的任何更改。

【讨论】：