Searching for the Ultimate 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:

• 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 fo开发者_开发问答nt.

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:

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

Check out DOJO tools text area control

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

This closely come to your requirements.

You may need to roll your own to meet those requirements.

These could be a start.

http://tuckey.org/textareasizer/ (though try and avoid eval() in yours)

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

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

This actually seems like a good jQuery plugin. I might have a tackle at developing something like this. If I get it done, I'll post it here.

I spent a few hours developing something, but then I found this one that seems to be really good.

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

You want to auto-size the display? but leave the content the same?

That is all the scripts can do, adjust the display, and let you see more of your own text...

This A List Apart post contains an implementation that looks pretty close to meeting your criteria and contains a good explanation of what's going on.

Are any of these useful?

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

I have been using nicEdit. It seems to have all that you need and the script is only 1700 lines with an MIT license so you could make any changes you need.