OnClick increase textarea rows

Id like to have a smiple html textarea that when cli开发者_如何学Gocked (i guess onFocused) will change its rows="1" property to rows="10." I am pretty sure this can be done with javascript, but im not sure how. Any help will be much appreciated.

<textarea rows="1" onclick="this.rows = '10';"></textarea>

If you want to increase number of rows when textarea is selected by another way for e.g. tabulator you should use onfocus instead of onclick, and if you wanna decrease rows when losing focus, you should use something like this onblur="if(this.value == '') this.rows = '1';" - Because when you once type text into the textarea, and click out of it, the textarea may shrink to 1 row and your text will be not readeable. This prevents this behavior - only shrink when textarea is empty.