How to prevent textarea from dancing while typing and working at the bottom of the page ?: jQuery / CSS

Question

I constantly print text in auto-size textarea;

When the text goes to the bottom of the page and I keep typing,

What I find is that the page is dancing like hell on every press or keyboard, and the text goes to the bottom of the page (for which I need to scroll down to check what is happening). How to prevent tabs and page text from showing?

JS Fiddle: https://jsfiddle.net/osbnnbxa/

Browser: IE10 (also find a bit of dancing in firefox, but the client uses IE10, so you only need to work on this)

HTML:

<div> <div> <br><br> &nbsp;&nbsp; <textarea class="normal" name="myarea" id="myarea" style="height: 100px; overflow-y: hidden;"></textarea> </div> </div> <input type="button" class="butt" value="ehehehhe" /> 

JQuery

 var myquery = { autoHeight: function(e) { $(e).css({ 'height': 'auto', 'overflow-y': 'hidden' }).height(e.scrollHeight); }, init: function() { setTimeout(function() { $('textarea').each(function() { myquery.autoHeight(this); }).on('input', function() { myquery.autoHeight(this); }); }, 200); $("textarea").keypress(function(e) { $(".butt").focus(); $(this).focus(); }); } }; $(myquery.init); 

Refresh . The client says that it does not determine the maximum height of the text field. Let the stream flow as the text grows.

Answer 1

Ok, I know what you said to stream textarea, but I really like this solution. In your violin, it allows the texture to grow closer to the bottom of the viewport and stops all dancing. Hope a reasonable compromise. The modified fiddle is here .

 textarea { max-height: 85vh; }