javascript – 根据内容自动调整文字区域大小

参见英文答案 > Creating a textarea with auto-resize30个
在我的一个页面上,我有一个文本区域html标签供用户写一个字母.我想要文本区域下方的内容向下移动,换句话说,我想让文本区域垂直调整大小,每行添加到文本区域并且使下面的内容简单地相对于文本区域的底部定位.

我希望的是,javascript / jquery有一种方法来检测什么时候换行,或者当添加一行新行并且基于这样做时,可以调整文本区域容器的大小.

我的目标是使文本区域之下的内容与文本底部保持不变,无论用户写多少.

当文本溢出时,文本区域创建一个滚动条.

解决方法

由于我对网络上发现的几种解决方案并不满意,所以我就这样做了.

尊重最小高度,最大高度.
通过向高度添加一个缓冲区(目前为20,可以替换为line-height),避免跳过并滚动滚动条.但是当达到最大高度时仍然显示滚动条.
避免重新设置容器滚动位置,方法是逐渐减小文本区域高度,而不是将其设置为0.因此,也可以一次删除所有已删除的行.不用浏览器嗅探就可以在IE和Chrome中使用.

http://jsfiddle.net/Nd6B3/4/

< textarea id =“ta”>< / textarea>

#ta {
    width:250px;
    min-height:116px;
    max-height:300px;
    resize:none;
}

$("#ta").keyup(function (e) {
    autoheight(this);
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));