JQuery - creating a TextArea autoresist that does not support Flash when resizing

Question

I worked on creating automatic resizing of a text area (e.g. FB) that changes as you type. There are several plugins. The problem is that they are all only 99%. What is missing:

• In case of changing the size of the text field blinks (when returning / entering)
• In Paste mode there is a delay

Please see here: http://jsfiddle.net/uzjdC/3/

Any ideas why it blinks when resizing? Enter text, then press Enter to see it.

thanks

Answer 1

Yahoo! I have found a solution! Your example really intrigued me, so I decided to play jsFiddle to try and fix your flashing problem . The blinking is due to the fact that TextArea has "a lot of text" and scrolling occurs. The keyup event keyup not equipped to beat this scrollbar, but ... there is a scroll event!

Html:

 <textarea id="tst" rows="1" cols="40">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum porttitor neque eget consequat. Sed faucibus purus vitae felis facilisis bibendum.</textarea> 

Css:

 textarea{ overflow:hidden; overflow-x:hidden; overflow-y:hidden; padding:10px; } 

To perform the increase, I use the rows attribute in TextArea. I wrote it in a function: I increase the size of the area with this function:

 //resize text area function resizeTextArea(elem){ elem.height(1); elem.scrollTop(0); elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height()); } 

Now we only need to bind the size:

 //inital resize - on document load resizeTextArea($('#tst')); //bind events $('#tst').bind('scroll keyup', function(){ resizeTextArea($(this)); }); 

Note: no flashing! What for? Because using the scoll event! You can try the solution here: http://jsfiddle.net/KeesCBakker/2D8Kf/

Good luck

Change Changed code in jsFiddle example to support schemes with dynamically added text areas. Check also this SO question .