寻找终极调整文本区域

问题描述

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

I'm wanting to provide a resizing textarea control for users. I've given this a go and looked at a number of other implementations, but I can't seem to find one that meets all my requirements. Specifically I want a control that:

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

• Works in IE6, IE7, IE8 on Windows and Firefox 3 and 3.5 on Windows and OS X when the page is rendered in standards compliant mode (i.e. not in quirks mode).
• Does not mess up the undo buffer/undo stack. This is a particularly nasty issue with IE - adding nodes, removing nodes and some other DOM operations will reset the input buffer meaning that if an implementation relies on these techniques an undo will not behave like it does in a standard textarea control. I haven't been able to find much information about this bug except for this note. Implementations like the jQuery Auto Growing Plugin suffer from this problem - try undoing changes in IE and compare how this works to a standard textarea. I've added an example page demonstrating this problem to JSBin.
• Has a maximum height beyond which the control cannot grow.
• Shrinks appropriately when content is deleted.
• Does not flicker or act strangely on keypress. e.g. jQuery Auto Growing Textarea control behaves strangely with, at least IE7, when the control has grown beyond it's initial size.
• Does not require the control to use a fixed-width/monospace font.

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

The closest I've seen to something that works like this is Facebook's status update field, which is implemented as a content editable div element, but I have some reservations about using such an element because using a div means:

• 需要明确地设置边框样式，这意味着我们最终会得到一个看起来与原生文本区域不同的边框.
• 需要将内容与真实文本区域同步(可能双向同步?).
• 在相对于文本区域的位置放置提示和其他元素时增加了复杂性.
• 虽然这种方法适用于 Facebook 状态更新之类的东西，但它在包含数百个标准输入元素的表单中效果如何?

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

What I've set out above represents the "ultimate resizing textarea" - addressing what I perceive to be issues with existing approaches. Does such a control exist? Is it possible to write such a control?

推荐答案

查看 DOJO工具文本区控件

查看更多关于此演示页面(文本区域在表格末尾)

see more on this demo page (text area At the end of the form )

这非常符合您的要求.

这篇关于寻找终极调整文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！