设置文本区域的高度自动生成滚动

Question

我试图设计一个文本区域，它根据内容调整自身大小。我就是这么写的-

<div class='container'>
    <textarea data-autoresize='true'></textarea>
</div>

JavaScript

$('body').on('keyup input','textarea', function(){
    var offset = this.offsetHeight - this.clientHeight;
    $(this).css('height','auto').css('height', this.scrollHeight + offset);
}).removeAttr('data-autoresize');

CSS

textarea {
    overflow: hidden;
    width: 150px;
    height: 150px;
}

但是，这会导致当文本区域的大小增大并且容器变得可滚动时，容器元素将滚动到每个字符输入的文本区域的顶部。有什么办法阻止这个卷轴吗？

编辑

你可以参考一下这个小提琴- https://jsfiddle.net/07d6gsb1/

Answer 1

滚动位置自动设置为焦点元素( textarea)的顶部。您必须手动将滚动位置设置为初始值，将其添加到jQuery中：

$('body').on('keyup input','textarea', function(){
    var offset = this.offsetHeight - this.clientHeight;
    var scroll = $('body').scrollTop();
    $(this).css('height','auto').css('height', this.scrollHeight + offset);
    $('body').scrollTop(scroll);
}).removeAttr('data-autoresize');

.scrollTop()接受元素的滚动位置，scrollTop(n)设置元素的滚动位置。

工作代码：http://codepen.io/robertspier/pen/GNLmoY

Answer 2

您可以使用这个插件自生长。

您可以尝试按下并按住textarea中的enter键。与其他自动扩展的textarea插件的效果比较.

$(function() {
   $('textarea').autogrow();
});

注意:您应该包括所需的js文件..。

为了防止文本区域中的滚动条在展开/收缩期间闪烁，还可以将overflow设置为hidden：