javascript - 如何防止 textarea 在打字时跳到页面底部？ : JQuery/CSS

Question

我不断地输入自动调整大小的文本区域；

当文本进入页面底部并且我继续输入时；

我发现页面在每次按键或 keyup 时跳得像 hell 一样，文本运行到页面底部(为此我需要向下滚动以检查发生了什么)。如何防止页面跳动和文字跑底？

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

浏览器:IE10(在 firefox 中也发现了 little dancing；但是客户使用 IE10，所以只需要在 IE10 上工作)

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);

更新:客户说没有定义文本区域的最大高度。让它随着文本的增加而流动。

Answer 1

好吧，我知道你说过让文本区域流动，但我真的很喜欢这个解决方案。在你的 fiddle 中，它让文本区域增长到接近视口(viewport)的底部并停止所有的跳舞。希望这是一个合理的妥协。修改后的 fiddle 是 here .

textarea {
  max-height: 85vh;
}