0

I have a JSFiddle to take a look at here

I have been able to create an auto expanding and reduction textarea so as the user types it will auto expand and reduce if the user removes text. The problem is that the text bounces around and a scrollbar appears. I am not sure why the text is bouncing around as I type and I cant figure out how to remove the scrollbar.

When I remove

while($(this).outerHeight() > this.scrollHeight - parseFloat($(this).css("borderTopWidth")) - parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()-1);
};

Then the bouncing text goes away.

Also am I killing a dead horse with my JS code? Is there an easier way to do this? I feel like I am.

Also the first time you type in it the textarea inserts </body> and </html> into the textarea. This does not happen in my server, but is happening on JSFiddle only.

Any help to stop the bouncing text and remove scrollbars?

SOVLED:

I was finally able to solve my issue by changing the .keyup to .keydown in the function and removed the - parseFloat($(this).css("borderTopWidth")) - parseFloat($(this).css("borderBottomWidth")) the bouncing text and scrollbar issues were fixed. Here is the code that is also on the JSFiddle example

.keydown(function(e) {
    while($(this).outerHeight() < this.scrollHeight) {
        $(this).height($(this).height()+1);
    };
    while($(this).outerHeight() > this.scrollHeight) {
        $(this).height($(this).height()-1);
    };
});
Cesar Bielich
  • 4,754
  • 9
  • 39
  • 81
  • I notice that you are missing , is that part of the problem? – Mr. Concolato Sep 30 '14 at 19:20
  • thanks, I did add it and still same results – Cesar Bielich Sep 30 '14 at 19:21
  • It looks like you took your code from this question: http://stackoverflow.com/questions/2948230/auto-expand-a-textarea-using-jquery but if you check out the fiddle that's posted with it you will find the code has changed quite a bit (http://jsfiddle.net/SpYk3/m8Qk9/). Sidenote: cache your jquery objects `var $this = $(this);` at the top of your callback, everytime you call `$(this)` you are creating a new jquery object for no good reason. – Rob M. Sep 30 '14 at 19:26
  • I applied the changes in the JSFidle and still the same result – Cesar Bielich Sep 30 '14 at 19:54

0 Answers0