Dynamic size of <textarea>

[anmldr]

One of the problems with having a textarea is that we don't have a
scroll bar on the iPhone. I am investigating ways to have client side
storage of a "notes" section for my users. I really did not want to
limit the amount of data that the user enters. It will be rare if
they enter a lot of data but I want to give them the option. So, I
wanted to increase the size of the <textarea> vertically.

This question has been asked many times on the Internet (not for the
iPhone) and there have been some very complicated answers. I came
across a very elegant way to do this and I thought that I would share.

The credit goes to this site:
http://www.felgall.com/jstip45.htm

I am using iUI and so you can put this in an external js file and
reference it in the head of your first page of your webapp.

function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}


Then add onkeyup="sz(this);" to the textarea parameters to get the
size of the textarea to be recalculated each time the content of the
textarea is changed.

In the body of the page that has a textarea:
<textarea cols="40" rows="3" onclick="sz(this);" onkeyup="sz(this);"></
textarea>

Now I am off to learn more about client side storage. I have found 2
different solutions but have to play around with them. There is the
SafariJSDatabaseGuide.pdf on Apple's web site and persist-js .

Hope this helps someone.
Linda

[b-money]

This is awesome Linda, thank you !!

~ brent