As I type into the auto-sizing textarea, the text runs to the bottom of the page and causes it to dance uncontrollably with each key press. This forces me to constantly scroll down to see what's happening. How can I prevent this page dancing and keep the text from running off the bottom?
To replicate the issue, please refer to this JS Fiddle: https://jsfiddle.net/osbnnbxa/
The problem seems most prominent in IE10 (slight dancing in Firefox). As the client primarily uses IE10, a solution specific to this browser is required.
Below is the HTML code snippet:
<div>
<div>
<br><br>
<textarea class="normal" name="myarea" id="myarea" style="height: 100px; overflow-y: hidden;"></textarea>
</div>
</div>
<input type="button" class="butt" value="ehehehhe" />
JQuery implementation:
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);
Update: The customer has requested not to define the maximum height of the textarea. It should expand as the text increases.