设置 textarea 的自动高度会导致滚动答案

【问题标题】：Setting height auto of textarea causes scroll设置 textarea 的自动高度会导致滚动
【发布时间】：2016-12-22 17:39:02
【问题描述】：

我正在尝试设计一个根据内容调整自身大小的文本区域。这是我写的-

HTML

<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/

【问题讨论】：

你能分享一下你的 HTML 结构吗？编辑：谢谢！
为什么要设置两次高度？
@moopet 因为否则偏移量会被添加，即使删除字符也会增加高度，他基本上会重置输入时的高度。
我似乎无法重现此问题，您使用的是什么浏览器？ codepen.io/robertspier/pen/GNLmoY
这很奇怪，你的问题在我的 codepen 中仍然存在吗？

标签： javascript jquery html css

【解决方案1】：

您的滚动位置会自动设置为焦点元素（文本区域）的顶部。您必须手动将滚动位置设置为初始值，将其添加到您的 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

【讨论】：

【解决方案2】：

你可以使用这个插件autogrow。

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

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

注意：您应该包含所需的 js 文件...

为了防止文本区域中的滚动条在扩展/收缩过程中闪烁，您也可以将overflow设置为hidden：

【讨论】：