正在寻找最终的Resizing Textarea [英] Searching for the Ultimate Resizing Textarea

问题描述

我想为用户提供resizing 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:

• 适用于Windows上的IE6，IE7，IE8以及Windows和OS X上的Firefox 3和3.5页面以标准兼容模式呈现（即不是在怪异模式下）。


• 不会弄乱undo buffer / undo stack。 IE是一个特别令人讨厌的问题 - 添加节点，删除节点和其他一些DOM操作将重置输入缓冲区，这意味着如果实现依赖于这些技术，则撤销将不会像在标准textarea控件中那样运行。除了本说明之外，我无法找到有关此bug的更多信息。像jQuery 自动增长插件这样的实现遇到了这个问题 - 尝试撤消IE中的更改并比较这个适用于标准文本区域。我添加了一个示例页面向JSBin演示此问题。


• 已控件无法增长的最大高度。


• 删除内容时适当缩小。


• 按键不会闪烁或行为异常。例如当控件超出初始大小时，jQuery自动增长Textarea控件的行为奇怪，至少是IE7。


• 不需要控件使用固定宽度/等宽字体。 / li>
  

• 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:

• 需要明确地设置边框样式，这意味着我们可能会结束边框看起来与原生文本区域不同。


• 需要将内容与真实文本区域同步（可能在两个方向上？）。


• 添加将提示和其他元素相对于textarea的位置放置时的复杂性。


• 虽然这种方法适用于Facebook状态更新，但它在包含数百个标准输入的表单中的效果如何元素？

• Need to explicitly style the border which means we could end up with a border that looks different to a native textarea.
• Need to sync content with the real textarea (possibly in both directions?).
• Adds complexity when placing hints and other elements relative to position of a textarea.
• While this approach works for something like a Facebook status update, how well would it work in a form containing hundreds of standard input elements?

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

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 )

这非常符合您的要求。

这篇关于正在寻找最终的Resizing Textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！