Javascript 根据内容自动调整文本区域大小

在我的一个页面上，我有一个文本区域html标签，用户可以用它来写一封信。我希望文本区域下方的内容向下移动，或者换句话说，我希望文本区域随着添加到文本区域的每一行而垂直调整大小，并使下面的内容仅相对于文本区域的底部定位

我希望javascript/jquery能够检测单词何时换行，或者何时添加新行，并基于此调整文本区域容器的大小

我的目标是使文本区域下方的内容与文本底部保持相同的距离，无论用户写了多少

当文本溢出时，文本区域会创建一个滚动条。

请参阅。这会根据行数增加文本区域的高度

我想这就是你想要的

从下面的答案中复制了代码：

HTML

<p>Code explanation: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a></p>

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

首先下载插件：

步骤1：将“jquery.autoresize.min.js”放在保存jquery插件的地方

步骤2：用HTML链接文件->

确保此链接位于jquery链接之后，位于您自己的javascript/jquery代码链接之前

步骤3：在javascript代码文件中，只需添加

$（“#containerToBeResized”）.autosize（）

工作示例。
由于我对在web上找到的几种解决方案不太满意，以下是我的看法

尊重最小高度，最大高度。
通过将缓冲区添加到高度（当前为20，可能替换为行高度），避免在滚动条上跳跃和闪烁。但是，当达到最大高度时，仍然显示滚动条。
通过增量减少textarea高度而不是将其设置为0，避免重置容器滚动位置。因此也将同时删除所有已删除的行。在IE和Chrome中工作，无需浏览器嗅探



插件可以吗？第一个成功的谷歌：它是基于jQuery的Johannes的想法很好，但如果一行的长度超过文本区域的宽度，则不起作用。
$（this.val（）
->
this.value
和
$（this.prop（'rows'，rows.length）
->
this.rows=this.value.split（\n”）
此工作示例。仍然存在同样的问题，句子的宽度没有被检查。解决方案不错+1.但我不喜欢这段时间。我认为更好的是：
函数autoheight（a）{$（a）.height（20）；$（a）.height（$（a）.prop（'scrollHeight'）+20）；}
是的，这样会更干净，不幸的是，当你一次将高度降低到20时，它会失去容器（即主体）的滚动位置。你刚刚回答了这个难题：。我会等你回答，否则我今晚就发我的。这个简单的方法对我来说太神奇了！到目前为止，我看到的唯一解决方案（包括许多库）不会使滚动条失去它的位置！非常感谢。我一直在寻找解决这个问题的方法（通过在“1px”高度破解之前插入一个与textarea高度相同的div），但是你的解决方案（尽管它有一个while循环）对我来说似乎是最干净的。在IE8中甚至没有加载页面。这涉及到
最小高度
和
最大高度
。
/*global document:false, $:false */
var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('keyup', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}

$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length);
});

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