17

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 font.

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?

Walter Rumsby
  • 7,435
  • 5
  • 41
  • 36
  • 1
    "how well would it work in a form containing hundreds of standard input elements?" Would lots of these uber textareas be used on the same page? – Tom Oct 28 '09 at 21:50
  • Potentially, yes. The thing with Facebook (or even Google Docs) is that they only really need to deal with a single contentEditable element on a page, which is obviously a lot simpler than dealing with 20+. – Walter Rumsby Oct 29 '09 at 02:21

6 Answers6

6

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.

Anthony Pegram
  • 123,721
  • 27
  • 225
  • 246
RameshVel
  • 64,778
  • 30
  • 169
  • 213
  • Strange - the demo page doesn't seem to have a problem with the undo stack in IE, but copying the example from the initial link does. – Walter Rumsby Oct 27 '09 at 22:44
3

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

alex
  • 479,566
  • 201
  • 878
  • 984
  • The solution from ViralPatel details how to create a slightly different control from the one I'm interested in. – Walter Rumsby Oct 26 '09 at 22:56
  • Stephen Chapman's solution does not shrink if content is removed. – Walter Rumsby Oct 26 '09 at 22:57
  • Text Area Resizer has issues when shrinking when using Firefox. – Walter Rumsby Oct 26 '09 at 23:58
  • BTW, the use of eval in Text Area Resizer is bizarre, the last 3 lines of that function could be rewritten as: return Math.max(hard_lines, soft_lines); – Walter Rumsby Oct 27 '09 at 00:20
  • @wrumsby Yes I did find that odd when I examined the source. Maybe the author wasn't familiar with the Math object. However, when turning to `eval()` there is usually a better way (only thing I can think of `eval()` being useful is for parsing JSON). – alex Oct 27 '09 at 00:25
  • @alex My initial suspicion is that the author was trying to avoid having a > character inline in their HTML document as this may have triggered some editor or validator warning. – Walter Rumsby Oct 27 '09 at 00:35
  • Text Area Resizer also has problems if not using a fixed-width/monospace font. – Walter Rumsby Oct 27 '09 at 00:35
  • I'll see if I can come up with a plugin tonight to address these issues. At least, my attempt could be a start. – alex Oct 27 '09 at 01:55
  • I spent a few hours having a go at a plugin, but ended up finding the one I linked to above. – alex Oct 27 '09 at 10:36
  • This is the same plugin I mention in the original question - jQuery Auto Growing Plugin - which has problems with the IE undo stack and has a strange flicker on keypress in IE. – Walter Rumsby Oct 27 '09 at 19:45
  • Sorry - I examined it's code and it's creating a hidden div - then setting it's CSS to be the same as the textarea, and then when it's focuses it's putting the text in the div, and then measuring the height of the hidden div. My version was using the clientHeight and scrollHeight attributes to get the textarea to enlarge, – alex Oct 27 '09 at 23:23
2

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...

crosenblum
  • 1,869
  • 5
  • 34
  • 57
2

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.

Simon Lieschke
  • 13,058
  • 6
  • 46
  • 60
0

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

Adrian
  • 6,013
  • 10
  • 47
  • 68
  • The SitePoint article (the one in 3 parts) makes some useful observations about techniques, but it destroys the undo stack in IE because the solution manipulates the DOM. – Walter Rumsby Oct 26 '09 at 21:45
  • The solution from ViralPatel details how to create a slightly different control from the one I'm interested in. – Walter Rumsby Oct 26 '09 at 22:47
  • Smart Area seems to have issues shrinking, particularly in Internet Explorer. – Walter Rumsby Oct 26 '09 at 22:48
  • Resizable Body is based on the elastic jQuery plugin - http://plugins.jquery.com/project/elastic - which again has problems with the undo stack in IE. – Walter Rumsby Oct 26 '09 at 22:55
0

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.

Matthew
  • 2,210
  • 1
  • 19
  • 30
  • nicEdit relies on the contentEditable technique which I'm trying to avoid, however perhaps my reservations about this technique are unwarranted. – Walter Rumsby Oct 27 '09 at 19:54