Question

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

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

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

修改

你可以参考这个小提琴 - 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

您可以使用此插件autogrow。

您可以尝试按住textarea中的回车键。将效果与其他自动扩展textarea插件进行比较....

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

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

防止textarea中的滚动条闪烁和＆amp;在扩展/收缩期间关闭，您也可以将overflow设置为hidden：

设置textarea的高度auto会导致滚动

2 个答案: