正在寻找最终的Resizing Textarea

Question

我想为用户提供resizing textarea控件。我已经给了这个去看看其他一些实现，但我似乎找不到满足我所有要求的实现。具体来说，我想要一个控件：

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

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

• 需要明确设置边框样式，这意味着我们最终可能会看到与原始文本区域不同的边框。
• 需要将内容与真实文本区域同步（可能在两个方向上？）。
• 在相对于textarea的位置放置提示和其他元素时添加复杂性。
• 虽然这种方法适用于Facebook状态更新，但它在包含数百个标准输入元素的表单中的效果如何？

我上面列出的内容代表了“最终调整文本区域” - 解决了我认为与现有方法有关的问题。这样的控制存在吗？是否可以编写这样的控件？

Answer 1

查看DOJO tools text area control

详情请见demo page（表格末尾的文字区域）

这非常符合您的要求。

Answer 2

您可能需要自己动手才能满足这些要求。

这可能是一个开始。

http://tuckey.org/textareasizer/（虽然试着避开你的eval（））

http://www.felgall.com/jstip45.htm

http://viralpatel.net/blogs/2009/06/textarea-resize-javascript-jquery-plugin-resize-textarea-html.html

这实际上看起来像是一个很好的jQuery插件。 我可能会在开发这样的东西时有所帮助。如果我完成了，我会在这里发布。

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

http://www.aclevercookie.com/demos/autogrow_textarea.html

Answer 3

您想自动调整显示尺寸吗？但保留内容相同？

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

Answer 4

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

Answer 5

这些都有用吗？

Textarea Resize JavaScript: Resize textarea using jQuery plugin

Smart Area: A Lightweight Resizing Text Area Plugin for jQuery

How to Build an Auto-Expanding Textarea jQuery Plugin, Part 1

How to Build an Auto-Expanding Textarea jQuery Plugin, Part 2

How to Build an Auto-Expanding Textarea jQuery Plugin, Part 3

Resizable Body

Answer 6

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