Working on this for days now, mostly on compressing / trimming prototype, deciding the code quote style to use, making some helper scripts. Still not sure which quote options to use, anyway.

Right, I’m using the scrollHeight attribute. I was trying to stay away from that approach and use shadow divs instead. But finally scrollHeight appears to be a better option in my case. It works perfect after taking care of IE and FX specific behaviours in my case.

However I don’t think it will be the same in your case, auto grow while you type. I use it during page load to fix block sizes. I keep them readonly, but I saw that when I type anything in a textarea (non readonly) on IE, it’s size gets changed (probably trying to prevent word-wraps). And when it’s readonly, the size is wrongly reported, so I needed to switch readonly mode off during calculation and then back on. This was on xhtml 1.0. You can try it anyway, didn’t try the last version on a test env. it may change on CSS definitons.

My intention was to use it for a wrapped pre for code samples. It works, but I guess I’ll use HTML converted samples and horizontal scrolls now. You can see the code sample below this page :

http://blog.onursafak.com/2008/07/hide-email-links-from-spam-bots-works.html

It’s a textarea, you can see the resize script in blog.js. To keep one more line with this approach, I would get the font size, line spacing and line height during initialization, and add them to the reported size, or just add a row during init, and get the height difference.

Onur

Onur

In my testing I used Prototype 1.6.0.2, IE 6.0.2900.2180.xpsp2_gdr.070227-2254. My Content-Type was set to application/xhtml+xml (at least, assuming that IE6 is advertising this in its Accept header) and my document is valid XHTML. I didn’t get any JS errors in this case.

How are you measuring the textarea internal content size? Are you using the scrollHeight attribute on the textarea? Have you found that to be reliable across browsers? If so, that seems like a much better approach.

Thanks!

currentTimer variable seems to have no use in the script (?) :

setTimeout(timerHandler, 250);

Well, not sure how were you able to test this on IE6, there seems to be some problems with it. Tried with different versions of Prototype.

First I needed to change

var textarea = inputElement;

into :

var textarea = $(inputElement);

as IE doesn’t allow us to touch element prototypes, so element variables can’t automatically have ‘Prototype Library’ specific methods. So it gives ‘variable or method doesn’t exist’

Then I needed to change

var div = $div({id: textarea.id + '_hidden'});

into :

var div = $div();

Dunno why, but IE doesn’t like ‘id’ parameter somehow, and the function returns ‘undefined’

Then one last thing, which made me think this is not always a good solution for IE, I needed to change

'whiteSpace' : 'pre-wrap'

to :

'whiteSpace' : 'pre'

as IE doesn’t support ‘pre-wrap’ value, and resets the text style in the ‘div’ to something close to the default style, which makes the script read wrong values. But with no wrapping, this won’t work for every design.

Of course everything could be converted to non-pre style but in my case “pre-wrap” is the reason I’m messing with all this textarea hacks.

So I finally returned to a different approach; measuring the content and resizing the textarea, after giving all my energy to the shadow div technique.

Wanted to note these down, it may be helpful for people with applicable designs. You may want to check common.js on facebook.

Onur